Merge remote-tracking branch 'origin/develop' into codex/locale-loader-audit

# Conflicts:
#	app/javascript/dashboard/i18n/index.js
#	app/javascript/dashboard/i18n/locale/am/index.js
#	app/javascript/dashboard/i18n/locale/ar/index.js
#	app/javascript/dashboard/i18n/locale/az/index.js
#	app/javascript/dashboard/i18n/locale/bg/index.js
#	app/javascript/dashboard/i18n/locale/ca/index.js
#	app/javascript/dashboard/i18n/locale/cs/index.js
#	app/javascript/dashboard/i18n/locale/da/index.js
#	app/javascript/dashboard/i18n/locale/de/index.js
#	app/javascript/dashboard/i18n/locale/el/index.js
#	app/javascript/dashboard/i18n/locale/en/index.js
#	app/javascript/dashboard/i18n/locale/es/index.js
#	app/javascript/dashboard/i18n/locale/fa/index.js
#	app/javascript/dashboard/i18n/locale/fi/index.js
#	app/javascript/dashboard/i18n/locale/fr/index.js
#	app/javascript/dashboard/i18n/locale/he/index.js
#	app/javascript/dashboard/i18n/locale/hi/index.js
#	app/javascript/dashboard/i18n/locale/hr/index.js
#	app/javascript/dashboard/i18n/locale/hu/index.js
#	app/javascript/dashboard/i18n/locale/hy/index.js
#	app/javascript/dashboard/i18n/locale/id/index.js
#	app/javascript/dashboard/i18n/locale/is/index.js
#	app/javascript/dashboard/i18n/locale/it/index.js
#	app/javascript/dashboard/i18n/locale/ja/index.js
#	app/javascript/dashboard/i18n/locale/ka/index.js
#	app/javascript/dashboard/i18n/locale/ko/index.js
#	app/javascript/dashboard/i18n/locale/lt/index.js
#	app/javascript/dashboard/i18n/locale/lv/index.js
#	app/javascript/dashboard/i18n/locale/ml/index.js
#	app/javascript/dashboard/i18n/locale/ms/index.js
#	app/javascript/dashboard/i18n/locale/ne/index.js
#	app/javascript/dashboard/i18n/locale/nl/index.js
#	app/javascript/dashboard/i18n/locale/no/index.js
#	app/javascript/dashboard/i18n/locale/pl/index.js
#	app/javascript/dashboard/i18n/locale/pt/index.js
#	app/javascript/dashboard/i18n/locale/pt_BR/index.js
#	app/javascript/dashboard/i18n/locale/ro/index.js
#	app/javascript/dashboard/i18n/locale/ru/index.js
#	app/javascript/dashboard/i18n/locale/sh/index.js
#	app/javascript/dashboard/i18n/locale/sk/index.js
#	app/javascript/dashboard/i18n/locale/sl/index.js
#	app/javascript/dashboard/i18n/locale/sq/index.js
#	app/javascript/dashboard/i18n/locale/sr/index.js
#	app/javascript/dashboard/i18n/locale/sv/index.js
#	app/javascript/dashboard/i18n/locale/ta/index.js
#	app/javascript/dashboard/i18n/locale/th/index.js
#	app/javascript/dashboard/i18n/locale/tl/index.js
#	app/javascript/dashboard/i18n/locale/tr/index.js
#	app/javascript/dashboard/i18n/locale/uk/index.js
#	app/javascript/dashboard/i18n/locale/ur/index.js
#	app/javascript/dashboard/i18n/locale/ur_IN/index.js
#	app/javascript/dashboard/i18n/locale/vi/index.js
#	app/javascript/dashboard/i18n/locale/zh_CN/index.js
#	app/javascript/dashboard/i18n/locale/zh_TW/index.js

app/javascript/dashboard/App.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import LoadingState from './components/widgets/LoadingState.vue';
 import NetworkNotification from './components/NetworkNotification.vue';
 import UpdateBanner from './components/app/UpdateBanner.vue';
+import StatusBanner from './components/app/StatusBanner.vue';
 import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
 import PendingEmailVerificationBanner from './components/app/PendingEmailVerificationBanner.vue';
 import vueActionCable from './helper/actionCable';
@@ -27,6 +28,7 @@ export default {
     LoadingState,
     NetworkNotification,
     UpdateBanner,
+    StatusBanner,
     PaymentPendingBanner,
     WootSnackbarBox,
     PendingEmailVerificationBanner,
@@ -59,7 +61,6 @@ export default {
       isRTL: 'accounts/isRTL',
       currentUser: 'getCurrentUser',
       authUIFlags: 'getAuthUIFlags',
-      accountUIFlags: 'accounts/getUIFlags',
     }),
     hideOnOnboardingView() {
       return !isOnOnboardingView(this.$route);
@@ -98,15 +99,18 @@ export default {
       mql.onchange = e => setColorTheme(e.matches);
     },
     setLocale(locale) {
-      this.$root.$i18n.locale = locale;
+      if (locale) {
+        this.$root.$i18n.locale = locale;
+      }
     },
     async initializeAccount() {
       await this.$store.dispatch('accounts/get');
       this.$store.dispatch('setActiveAccount', {
         accountId: this.currentAccountId,
       });
+      const account = this.getAccount(this.currentAccountId);
       const { locale, latest_chatwoot_version: latestChatwootVersion } =
-        this.getAccount(this.currentAccountId);
+        account;
       const { pubsub_token: pubsubToken } = this.currentUser || {};
       // If user locale is set, use it; otherwise use account locale
       this.setLocale(this.uiSettings?.locale || locale);
@@ -129,12 +133,13 @@ export default {
 
 <template>
   <div
-    v-if="!authUIFlags.isFetching && !accountUIFlags.isFetchingItem"
+    v-if="!authUIFlags.isFetching"
     id="app"
     class="flex flex-col w-full h-screen min-h-0 bg-n-background"
     :dir="isRTL ? 'rtl' : 'ltr'"
   >
     <UpdateBanner :latest-chatwoot-version="latestChatwootVersion" />
+    <StatusBanner />
     <template v-if="currentAccountId">
       <PendingEmailVerificationBanner v-if="hideOnOnboardingView" />
       <PaymentPendingBanner v-if="hideOnOnboardingView" />

app/javascript/dashboard/api/agentBots.js

@@ -25,6 +25,10 @@ class AgentBotsAPI extends ApiClient {
   resetAccessToken(botId) {
     return axios.post(`${this.url}/${botId}/reset_access_token`);
   }
+
+  resetSecret(botId) {
+    return axios.post(`${this.url}/${botId}/reset_secret`);
+  }
 }
 
 export default new AgentBotsAPI();

app/javascript/dashboard/api/assignableAgents.js

@@ -6,9 +6,12 @@ class AssignableAgents extends ApiClient {
     super('assignable_agents', { accountScoped: true });
   }
 
-  get(inboxIds) {
+  get(inboxIds, { includeAgentBots = false } = {}) {
     return axios.get(this.url, {
-      params: { inbox_ids: inboxIds },
+      params: {
+        inbox_ids: inboxIds,
+        ...(includeAgentBots ? { include_agent_bots: true } : {}),
+      },
     });
   }
 }

app/javascript/dashboard/api/auth.js

@@ -106,4 +106,10 @@ export default {
     const urlData = endPoints('resetAccessToken');
     return axios.post(urlData.url);
   },
+  getSessions() {
+    return axios.get('/api/v1/profile/sessions');
+  },
+  revokeSession(id) {
+    return axios.delete(`/api/v1/profile/sessions/${id}`);
+  },
 };

app/javascript/dashboard/api/captain/assistant.js

@@ -1,6 +1,10 @@
 /* global axios */
 import ApiClient from '../ApiClient';
 
+// Viewer's UTC offset in hours, matching the reports API convention so the
+// backend can anchor calendar ranges to the viewer's day.
+const getTimezoneOffset = () => -new Date().getTimezoneOffset() / 60;
+
 class CaptainAssistant extends ApiClient {
   constructor() {
     super('captain/assistants', { accountScoped: true });
@@ -21,6 +25,18 @@ class CaptainAssistant extends ApiClient {
       message_history: messageHistory,
     });
   }
+
+  getStats({ assistantId, range }) {
+    return axios.get(`${this.url}/${assistantId}/stats`, {
+      params: { range, timezone_offset: getTimezoneOffset() },
+    });
+  }
+
+  getSummary({ assistantId, range }) {
+    return axios.get(`${this.url}/${assistantId}/summary`, {
+      params: { range, timezone_offset: getTimezoneOffset() },
+    });
+  }
 }
 
 export default new CaptainAssistant();

app/javascript/dashboard/api/captain/customTools.js

@@ -31,6 +31,12 @@ class CaptainCustomTools extends ApiClient {
   delete(id) {
     return axios.delete(`${this.url}/${id}`);
   }
+
+  test(data = {}) {
+    return axios.post(`${this.url}/test`, {
+      custom_tool: data,
+    });
+  }
 }
 
 export default new CaptainCustomTools();

app/javascript/dashboard/api/captain/document.js

@@ -6,15 +6,22 @@ class CaptainDocument extends ApiClient {
     super('captain/documents', { accountScoped: true });
   }
 
-  get({ page = 1, searchKey, assistantId } = {}) {
+  get({ page = 1, searchKey, assistantId, filter, source, sort } = {}) {
     return axios.get(this.url, {
       params: {
         page,
-        searchKey,
+        search_key: searchKey,
         assistant_id: assistantId,
+        filter,
+        source,
+        sort,
       },
     });
   }
+
+  sync(id) {
+    return axios.post(`${this.url}/${id}/sync`);
+  }
 }
 
 export default new CaptainDocument();

app/javascript/dashboard/api/captain/messageReports.js

@@ -0,0 +1,9 @@
+import ApiClient from '../ApiClient';
+
+class MessageReports extends ApiClient {
+  constructor() {
+    super('captain/message_reports', { accountScoped: true });
+  }
+}
+
+export default new MessageReports();

app/javascript/dashboard/api/channel/voice/twilioVoiceClient.js

@@ -48,6 +48,12 @@ class TwilioVoiceClient extends EventTarget {
     return !!this.activeConnection;
   }
 
+  setMuted(shouldMute) {
+    if (!this.activeConnection) return false;
+    this.activeConnection.mute(shouldMute);
+    return shouldMute;
+  }
+
   endClientCall() {
     if (this.activeConnection) {
       this.activeConnection.disconnect();
@@ -68,7 +74,7 @@ class TwilioVoiceClient extends EventTarget {
     this.inboxId = null;
   }
 
-  async joinClientCall({ to, conversationId }) {
+  async joinClientCall({ to, conversationId, callSid }) {
     if (!this.device || !this.initialized || !to) return null;
     if (this.activeConnection) return this.activeConnection;
 
@@ -76,6 +82,7 @@ class TwilioVoiceClient extends EventTarget {
       To: to,
       is_agent: 'true',
       conversation_id: conversationId,
+      call_sid: callSid,
     };
 
     const connection = await this.device.connect({ params });

app/javascript/dashboard/api/channel/voice/voiceAPIClient.js

@@ -12,10 +12,10 @@ class VoiceAPI extends ApiClient {
     return ContactsAPI.initiateCall(contactId, inboxId).then(r => r.data);
   }
 
-  leaveConference(inboxId, conversationId) {
+  leaveConference({ inboxId, conversationId, callSid }) {
     return axios
       .delete(`${this.baseUrl()}/inboxes/${inboxId}/conference`, {
-        params: { conversation_id: conversationId },
+        params: { conversation_id: conversationId, call_sid: callSid },
       })
       .then(r => r.data);
   }

app/javascript/dashboard/api/channel/whatsapp/whatsappCallsAPI.js

@@ -0,0 +1,45 @@
+/* global axios */
+import ApiClient from '../../ApiClient';
+
+class WhatsappCallsAPI extends ApiClient {
+  constructor() {
+    super('whatsapp_calls', { accountScoped: true });
+  }
+
+  show(callId) {
+    return axios.get(`${this.url}/${callId}`).then(r => r.data);
+  }
+
+  initiate(conversationId, sdpOffer) {
+    return axios
+      .post(`${this.url}/initiate`, {
+        conversation_id: conversationId,
+        sdp_offer: sdpOffer,
+      })
+      .then(r => r.data);
+  }
+
+  accept(callId, sdpAnswer) {
+    return axios
+      .post(`${this.url}/${callId}/accept`, { sdp_answer: sdpAnswer })
+      .then(r => r.data);
+  }
+
+  reject(callId) {
+    return axios.post(`${this.url}/${callId}/reject`).then(r => r.data);
+  }
+
+  terminate(callId) {
+    return axios.post(`${this.url}/${callId}/terminate`).then(r => r.data);
+  }
+
+  uploadRecording(callId, blob, filename = 'call-recording.webm') {
+    const formData = new FormData();
+    formData.append('recording', blob, filename);
+    return axios
+      .post(`${this.url}/${callId}/upload_recording`, formData)
+      .then(r => r.data);
+  }
+}
+
+export default new WhatsappCallsAPI();

app/javascript/dashboard/api/companies.js

@@ -1,21 +1,12 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
-export const buildCompanyParams = (page, sort) => {
-  let params = `page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
-
-export const buildSearchParams = (query, page, sort) => {
-  let params = `q=${encodeURIComponent(query)}&page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
+const buildParams = params =>
+  new URLSearchParams(
+    Object.entries(params).filter(
+      ([key, value]) => value !== undefined && (value !== '' || key === 'q')
+    )
+  ).toString();
 
 class CompanyAPI extends ApiClient {
   constructor() {
@@ -24,14 +15,49 @@ class CompanyAPI extends ApiClient {
 
   get(params = {}) {
     const { page = 1, sort = 'name' } = params;
-    const requestURL = `${this.url}?${buildCompanyParams(page, sort)}`;
+    const requestURL = `${this.url}?${buildParams({ page, sort })}`;
     return axios.get(requestURL);
   }
 
   search(query = '', page = 1, sort = 'name') {
-    const requestURL = `${this.url}/search?${buildSearchParams(query, page, sort)}`;
+    const requestURL = `${this.url}/search?${buildParams({ q: query, page, sort })}`;
     return axios.get(requestURL);
   }
+
+  listContacts(id, page = 1) {
+    return axios.get(`${this.url}/${id}/contacts?${buildParams({ page })}`);
+  }
+
+  listNotes(id) {
+    return axios.get(`${this.url}/${id}/notes`);
+  }
+
+  listConversations(id) {
+    return axios.get(`${this.url}/${id}/conversations`);
+  }
+
+  searchContacts(id, query = '', page = 1) {
+    const requestURL = `${this.url}/${id}/contacts/search?${buildParams({ q: query, page })}`;
+    return axios.get(requestURL);
+  }
+
+  createContact(id, payload) {
+    return axios.post(`${this.url}/${id}/contacts`, payload);
+  }
+
+  removeContact(id, contactId) {
+    return axios.delete(`${this.url}/${id}/contacts/${contactId}`);
+  }
+
+  destroyCustomAttributes(id, customAttributes) {
+    return axios.post(`${this.url}/${id}/destroy_custom_attributes`, {
+      custom_attributes: customAttributes,
+    });
+  }
+
+  destroyAvatar(id) {
+    return axios.delete(`${this.url}/${id}/avatar`);
+  }
 }
 
 export default new CompanyAPI();

app/javascript/dashboard/api/contacts.js

@@ -35,8 +35,15 @@ class ContactAPI extends ApiClient {
     return axios.patch(`${this.url}/${id}?include_contact_inboxes=false`, data);
   }
 
-  getConversations(contactId) {
-    return axios.get(`${this.url}/${contactId}/conversations`);
+  getConversations(contactId, { inboxId } = {}) {
+    const params = inboxId ? { inbox_id: inboxId } : {};
+    return axios.get(`${this.url}/${contactId}/conversations`, { params });
+  }
+
+  getAttachments(contactId, page = 1) {
+    return axios.get(`${this.url}/${contactId}/attachments`, {
+      params: { page },
+    });
   }
 
   getContactableInboxes(contactId) {
@@ -47,9 +54,10 @@ class ContactAPI extends ApiClient {
     return axios.get(`${this.url}/${contactId}/labels`);
   }
 
-  initiateCall(contactId, inboxId) {
+  initiateCall(contactId, inboxId, conversationId = null) {
     return axios.post(`${this.url}/${contactId}/call`, {
       inbox_id: inboxId,
+      conversation_id: conversationId,
     });
   }
 

app/javascript/dashboard/api/conversations.js

@@ -13,6 +13,10 @@ class ConversationApi extends ApiClient {
   updateLabels(conversationID, labels) {
     return axios.post(`${this.url}/${conversationID}/labels`, { labels });
   }
+
+  getUnreadCounts() {
+    return axios.get(`${this.url}/unread_counts`);
+  }
 }
 
 export default new ConversationApi();

app/javascript/dashboard/api/enterprise/account.js

@@ -14,6 +14,10 @@ class EnterpriseAccountAPI extends ApiClient {
     return axios.post(`${this.url}subscription`);
   }
 
+  selectBillingCurrency(currency) {
+    return axios.post(`${this.url}select_billing_currency`, { currency });
+  }
+
   getLimits() {
     return axios.get(`${this.url}limits`);
   }
@@ -27,6 +31,11 @@ class EnterpriseAccountAPI extends ApiClient {
   createTopupCheckout(credits) {
     return axios.post(`${this.url}topup_checkout`, { credits });
   }
+
+  // Topup packages for the account's billing currency.
+  getTopupOptions() {
+    return axios.get(`${this.url}topup_options`);
+  }
 }
 
 export default new EnterpriseAccountAPI();

app/javascript/dashboard/api/helpCenter/articles.js

@@ -16,6 +16,7 @@ class ArticlesAPI extends PortalsAPI {
     authorId,
     categorySlug,
     sort,
+    query,
   }) {
     const url = getArticleSearchURL({
       pageNumber,
@@ -25,6 +26,7 @@ class ArticlesAPI extends PortalsAPI {
       authorId,
       categorySlug,
       sort,
+      query,
       host: this.url,
     });
 
@@ -72,6 +74,34 @@ class ArticlesAPI extends PortalsAPI {
       category_slug: categorySlug,
     });
   }
+
+  bulkTranslate({ portalSlug, articleIds, locale, categoryId, force = false }) {
+    return axios.post(
+      `${this.url}/${portalSlug}/articles/bulk_actions/translate`,
+      { ids: articleIds, locale, category_id: categoryId, force }
+    );
+  }
+
+  bulkUpdateStatus({ portalSlug, articleIds, status }) {
+    return axios.patch(
+      `${this.url}/${portalSlug}/articles/bulk_actions/update_status`,
+      { ids: articleIds, status }
+    );
+  }
+
+  bulkUpdateCategory({ portalSlug, articleIds, categoryId }) {
+    return axios.patch(
+      `${this.url}/${portalSlug}/articles/bulk_actions/update_category`,
+      { ids: articleIds, category_id: categoryId }
+    );
+  }
+
+  bulkDelete({ portalSlug, articleIds }) {
+    return axios.delete(
+      `${this.url}/${portalSlug}/articles/bulk_actions/delete_articles`,
+      { data: { ids: articleIds } }
+    );
+  }
 }
 
 export default new ArticlesAPI();

app/javascript/dashboard/api/inbox/conversation.js

@@ -62,9 +62,10 @@ class ConversationApi extends ApiClient {
     });
   }
 
-  assignAgent({ conversationId, agentId }) {
+  assignAgent({ conversationId, agentId, assigneeType }) {
     return axios.post(`${this.url}/${conversationId}/assignments`, {
       assignee_id: agentId,
+      assignee_type: assigneeType,
     });
   }
 

app/javascript/dashboard/api/inbox/message.js

@@ -12,6 +12,7 @@ export const buildCreatePayload = ({
   bccEmails = '',
   toEmails = '',
   templateParams,
+  isVoiceMessage = false,
 }) => {
   let payload;
   if (files && files.length !== 0) {
@@ -33,6 +34,9 @@ export const buildCreatePayload = ({
     if (contentAttributes) {
       payload.append('content_attributes', JSON.stringify(contentAttributes));
     }
+    if (isVoiceMessage) {
+      payload.append('is_voice_message', true);
+    }
   } else {
     payload = {
       content: message,
@@ -64,6 +68,7 @@ class MessageApi extends ApiClient {
     bccEmails = '',
     toEmails = '',
     templateParams,
+    isVoiceMessage = false,
   }) {
     return axios({
       method: 'post',
@@ -78,6 +83,7 @@ class MessageApi extends ApiClient {
         bccEmails,
         toEmails,
         templateParams,
+        isVoiceMessage,
       }),
     });
   }

app/javascript/dashboard/api/inboxes.js

@@ -48,6 +48,24 @@ class Inboxes extends CacheEnabledApiClient {
       template,
     });
   }
+
+  resetSecret(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/reset_secret`);
+  }
+
+  enableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/enable_whatsapp_calling`);
+  }
+
+  disableWhatsappCalling(inboxId) {
+    return axios.post(`${this.url}/${inboxId}/disable_whatsapp_calling`);
+  }
+
+  setInboundCalls(inboxId, enabled) {
+    return axios.post(`${this.url}/${inboxId}/set_inbound_calls`, {
+      inbound_calls_enabled: enabled,
+    });
+  }
 }
 
 export default new Inboxes();

app/javascript/dashboard/api/mfa.js

@@ -14,9 +14,9 @@ class MfaAPI extends ApiClient {
     return axios.post(`${this.url}/verify`, { otp_code: otpCode });
   }
 
-  disable(password, otpCode) {
+  disable(password, { otpCode, backupCode } = {}) {
     return axios.delete(this.url, {
-      data: { password, otp_code: otpCode },
+      data: { password, otp_code: otpCode, backup_code: backupCode },
     });
   }
 

app/javascript/dashboard/api/onboarding.js

@@ -0,0 +1,18 @@
+/* global axios */
+import ApiClient from './ApiClient';
+
+class OnboardingAPI extends ApiClient {
+  constructor() {
+    super('onboarding', { accountScoped: true });
+  }
+
+  update(data) {
+    return axios.patch(this.url, data);
+  }
+
+  getHelpCenterGeneration() {
+    return axios.get(`${this.url}/help_center_generation`);
+  }
+}
+
+export default new OnboardingAPI();

app/javascript/dashboard/api/reports.js

@@ -31,6 +31,42 @@ class ReportsAPI extends ApiClient {
     });
   }
 
+  getDrilldown({
+    metric,
+    bucketTimestamp,
+    from,
+    to,
+    type = 'account',
+    id,
+    groupBy,
+    businessHours,
+    page,
+    perPage,
+    signal,
+  }) {
+    const requestConfig = {
+      params: {
+        metric,
+        bucket_timestamp: bucketTimestamp,
+        since: from,
+        until: to,
+        type,
+        id,
+        group_by: groupBy,
+        business_hours: businessHours,
+        timezone_offset: getTimeOffset(),
+        page,
+        per_page: perPage,
+      },
+    };
+
+    if (signal) {
+      requestConfig.signal = signal;
+    }
+
+    return axios.get(`${this.url}/drilldown`, requestConfig);
+  }
+
   // eslint-disable-next-line default-param-last
   getSummary(since, until, type = 'account', id, groupBy, businessHours) {
     return axios.get(`${this.url}/summary`, {

app/javascript/dashboard/api/specs/article.spec.js

@@ -153,4 +153,33 @@ describe('#PortalAPI', () => {
       );
     });
   });
+  describe('API calls', () => {
+    const originalAxios = window.axios;
+    const axiosMock = {
+      post: vi.fn(() => Promise.resolve()),
+      get: vi.fn(() => Promise.resolve()),
+      patch: vi.fn(() => Promise.resolve()),
+      delete: vi.fn(() => Promise.resolve()),
+    };
+
+    beforeEach(() => {
+      window.axios = axiosMock;
+    });
+
+    afterEach(() => {
+      window.axios = originalAxios;
+    });
+
+    it('#bulkUpdateCategory', () => {
+      articlesAPI.bulkUpdateCategory({
+        portalSlug: 'room-rental',
+        articleIds: [1, 2, 3],
+        categoryId: 7,
+      });
+      expect(axiosMock.patch).toHaveBeenCalledWith(
+        '/api/v1/portals/room-rental/articles/bulk_actions/update_category',
+        { ids: [1, 2, 3], category_id: 7 }
+      );
+    });
+  });
 });

app/javascript/dashboard/api/specs/assignableAgents.spec.js

@@ -26,5 +26,15 @@ describe('#AssignableAgentsAPI', () => {
         },
       });
     });
+
+    it('#getAssignableAgents with agent bots', () => {
+      assignableAgentsAPI.get([1], { includeAgentBots: true });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/assignable_agents', {
+        params: {
+          inbox_ids: [1],
+          include_agent_bots: true,
+        },
+      });
+    });
   });
 });

app/javascript/dashboard/api/specs/companies.spec.js

@@ -1,7 +1,4 @@
-import companyAPI, {
-  buildCompanyParams,
-  buildSearchParams,
-} from '../companies';
+import companyAPI from '../companies';
 import ApiClient from '../ApiClient';
 
 describe('#CompanyAPI', () => {
@@ -9,7 +6,6 @@ describe('#CompanyAPI', () => {
     expect(companyAPI).toBeInstanceOf(ApiClient);
     expect(companyAPI).toHaveProperty('get');
     expect(companyAPI).toHaveProperty('show');
-    expect(companyAPI).toHaveProperty('create');
     expect(companyAPI).toHaveProperty('update');
     expect(companyAPI).toHaveProperty('delete');
     expect(companyAPI).toHaveProperty('search');
@@ -32,111 +28,69 @@ describe('#CompanyAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('#get with default params', () => {
+    it('#get includes pagination and sorting params', () => {
       companyAPI.get({});
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies?page=1&sort=name'
       );
     });
 
-    it('#get with page and sort params', () => {
-      companyAPI.get({ page: 2, sort: 'domain' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=2&sort=domain'
-      );
-    });
-
-    it('#get with descending sort', () => {
-      companyAPI.get({ page: 1, sort: '-created_at' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with query', () => {
-      companyAPI.search('acme', 1, 'name');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme&page=1&sort=name'
-      );
-    });
-
-    it('#search with special characters in query', () => {
+    it('#search encodes query params', () => {
       companyAPI.search('acme & co', 2, 'domain');
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme%20%26%20co&page=2&sort=domain'
+        '/api/v1/companies/search?q=acme+%26+co&page=2&sort=domain'
       );
     });
 
-    it('#search with descending sort', () => {
-      companyAPI.search('test', 1, '-created_at');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=test&page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with empty query', () => {
+    it('#search keeps empty query param for backend validation', () => {
       companyAPI.search('', 1, 'name');
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies/search?q=&page=1&sort=name'
       );
     });
-  });
-});
 
-describe('#buildCompanyParams', () => {
-  it('returns correct string with page only', () => {
-    expect(buildCompanyParams(1)).toBe('page=1');
-  });
-
-  it('returns correct string with page and sort', () => {
-    expect(buildCompanyParams(1, 'name')).toBe('page=1&sort=name');
-  });
-
-  it('returns correct string with different page', () => {
-    expect(buildCompanyParams(3, 'domain')).toBe('page=3&sort=domain');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildCompanyParams(1, '-created_at')).toBe(
-      'page=1&sort=-created_at'
-    );
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildCompanyParams(2, '')).toBe('page=2');
-  });
-});
-
-describe('#buildSearchParams', () => {
-  it('returns correct string with all parameters', () => {
-    expect(buildSearchParams('acme', 1, 'name')).toBe(
-      'q=acme&page=1&sort=name'
-    );
-  });
-
-  it('returns correct string with special characters', () => {
-    expect(buildSearchParams('acme & co', 2, 'domain')).toBe(
-      'q=acme%20%26%20co&page=2&sort=domain'
-    );
-  });
-
-  it('returns correct string with empty query', () => {
-    expect(buildSearchParams('', 1, 'name')).toBe('q=&page=1&sort=name');
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildSearchParams('test', 1, '')).toBe('q=test&page=1');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildSearchParams('company', 3, '-created_at')).toBe(
-      'q=company&page=3&sort=-created_at'
-    );
-  });
-
-  it('encodes special characters correctly', () => {
-    expect(buildSearchParams('test@example.com', 1, 'name')).toBe(
-      'q=test%40example.com&page=1&sort=name'
-    );
+    it('#destroyAvatar deletes the company avatar endpoint', () => {
+      companyAPI.destroyAvatar(1);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/avatar'
+      );
+    });
+
+    it('#listContacts fetches company contacts', () => {
+      companyAPI.listContacts(1, 2);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts?page=2'
+      );
+    });
+
+    it('#searchContacts encodes contact search params', () => {
+      companyAPI.searchContacts(1, 'jane & co', 3);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/search?q=jane+%26+co&page=3'
+      );
+    });
+
+    it('#createContact links a contact to the company', () => {
+      companyAPI.createContact(1, { contact_id: 2 });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts',
+        { contact_id: 2 }
+      );
+    });
+
+    it('#removeContact unlinks a contact from the company', () => {
+      companyAPI.removeContact(1, 2);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/2'
+      );
+    });
+
+    it('#destroyCustomAttributes removes company custom attributes', () => {
+      companyAPI.destroyCustomAttributes(1, ['plan']);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/destroy_custom_attributes',
+        { custom_attributes: ['plan'] }
+      );
+    });
   });
 });

app/javascript/dashboard/api/specs/contacts.spec.js

@@ -41,7 +41,8 @@ describe('#ContactsAPI', () => {
     it('#getConversations', () => {
       contactAPI.getConversations(1);
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/contacts/1/conversations'
+        '/api/v1/contacts/1/conversations',
+        { params: {} }
       );
     });
 

app/javascript/dashboard/api/specs/conversations.spec.js

@@ -11,6 +11,7 @@ describe('#ConversationApi', () => {
     expect(conversationsAPI).toHaveProperty('delete');
     expect(conversationsAPI).toHaveProperty('getLabels');
     expect(conversationsAPI).toHaveProperty('updateLabels');
+    expect(conversationsAPI).toHaveProperty('getUnreadCounts');
   });
 
   describe('API calls', () => {
@@ -47,5 +48,12 @@ describe('#ConversationApi', () => {
         }
       );
     });
+
+    it('#getUnreadCounts', () => {
+      conversationsAPI.getUnreadCounts();
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/conversations/unread_counts'
+      );
+    });
   });
 });

app/javascript/dashboard/api/specs/inbox/conversation.spec.js

@@ -90,11 +90,16 @@ describe('#ConversationAPI', () => {
     });
 
     it('#assignAgent', () => {
-      conversationAPI.assignAgent({ conversationId: 12, agentId: 34 });
+      conversationAPI.assignAgent({
+        conversationId: 12,
+        agentId: 34,
+        assigneeType: 'AgentBot',
+      });
       expect(axiosMock.post).toHaveBeenCalledWith(
         `/api/v1/conversations/12/assignments`,
         {
           assignee_id: 34,
+          assignee_type: 'AgentBot',
         }
       );
     });

app/javascript/dashboard/api/specs/inbox/message.spec.js

@@ -83,5 +83,29 @@ describe('#ConversationAPI', () => {
         template_params: undefined,
       });
     });
+
+    it('appends is_voice_message when isVoiceMessage is true', () => {
+      const formPayload = buildCreatePayload({
+        message: 'voice message',
+        echoId: 42,
+        isPrivate: false,
+        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
+        isVoiceMessage: true,
+      });
+      expect(formPayload).toBeInstanceOf(FormData);
+      expect(formPayload.get('is_voice_message')).toEqual('true');
+    });
+
+    it('does not append is_voice_message when isVoiceMessage is false', () => {
+      const formPayload = buildCreatePayload({
+        message: 'regular audio',
+        echoId: 43,
+        isPrivate: false,
+        files: [new Blob(['audio-data'], { type: 'audio/ogg' })],
+        isVoiceMessage: false,
+      });
+      expect(formPayload).toBeInstanceOf(FormData);
+      expect(formPayload.get('is_voice_message')).toBeNull();
+    });
   });
 });

app/javascript/dashboard/api/specs/reports.spec.js

@@ -1,6 +1,8 @@
 import reportsAPI from '../reports';
 import ApiClient from '../ApiClient';
 
+const timezoneOffset = () => -new Date().getTimezoneOffset() / 60;
+
 describe('#Reports API', () => {
   it('creates correct instance', () => {
     expect(reportsAPI).toBeInstanceOf(ApiClient);
@@ -11,6 +13,7 @@ describe('#Reports API', () => {
     expect(reportsAPI).toHaveProperty('update');
     expect(reportsAPI).toHaveProperty('delete');
     expect(reportsAPI).toHaveProperty('getReports');
+    expect(reportsAPI).toHaveProperty('getDrilldown');
     expect(reportsAPI).toHaveProperty('getSummary');
     expect(reportsAPI).toHaveProperty('getAgentReports');
     expect(reportsAPI).toHaveProperty('getLabelReports');
@@ -42,11 +45,14 @@ describe('#Reports API', () => {
       });
       expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports', {
         params: {
+          business_hours: undefined,
+          group_by: undefined,
+          id: undefined,
           metric: 'conversations_count',
           since: 1621103400,
           until: 1621621800,
           type: 'account',
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
         },
       });
     });
@@ -59,13 +65,70 @@ describe('#Reports API', () => {
           group_by: undefined,
           id: undefined,
           since: 1621103400,
-          timezone_offset: -0,
+          timezone_offset: timezoneOffset(),
           type: 'account',
           until: 1621621800,
         },
       });
     });
 
+    it('#getDrilldown', () => {
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        from: 1621103400,
+        to: 1621621800,
+        type: 'inbox',
+        id: 1,
+        groupBy: 'day',
+        businessHours: false,
+        page: 2,
+        perPage: 25,
+      });
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: 1621103400,
+          until: 1621621800,
+          type: 'inbox',
+          id: 1,
+          group_by: 'day',
+          business_hours: false,
+          timezone_offset: timezoneOffset(),
+          page: 2,
+          per_page: 25,
+        },
+      });
+    });
+
+    it('#getDrilldown with abort signal', () => {
+      const controller = new AbortController();
+
+      reportsAPI.getDrilldown({
+        metric: 'incoming_messages_count',
+        bucketTimestamp: 1621103400,
+        signal: controller.signal,
+      });
+
+      expect(axiosMock.get).toHaveBeenCalledWith('/api/v2/reports/drilldown', {
+        params: {
+          metric: 'incoming_messages_count',
+          bucket_timestamp: 1621103400,
+          since: undefined,
+          until: undefined,
+          type: 'account',
+          id: undefined,
+          group_by: undefined,
+          business_hours: undefined,
+          timezone_offset: timezoneOffset(),
+          page: undefined,
+          per_page: undefined,
+        },
+        signal: controller.signal,
+      });
+    });
+
     it('#getAgentReports', () => {
       reportsAPI.getAgentReports({
         from: 1621103400,

app/javascript/dashboard/assets/scss/_base.scss

@@ -106,6 +106,10 @@ select {
   &[disabled] {
     @apply field-disabled;
   }
+
+  option:not(:disabled) {
+    @apply bg-n-solid-2 text-n-slate-12;
+  }
 }
 
 // Textarea

app/javascript/dashboard/assets/scss/_next-colors.scss

@@ -145,6 +145,12 @@
     --black-alpha-2: 0, 0, 0, 0.04;
     --border-blue: 39, 129, 246, 0.5;
     --white-alpha: 255, 255, 255, 0.8;
+
+    // Voice call widget - light mode
+    --call-widget: 33, 34, 38, 0.95;
+    --call-widget-border: 255, 255, 255, 0.1;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 
   .dark {
@@ -291,6 +297,12 @@
     --border-blue: 39, 129, 246, 0.5;
     --border-container: 255, 255, 255, 0;
     --white-alpha: 255, 255, 255, 0.1;
+
+    // Voice call widget - dark mode
+    --call-widget: 50, 53, 61, 1;
+    --call-widget-border: 255, 255, 255, 0.07;
+    --call-widget-text: 237, 238, 240, 1;
+    --call-widget-sub-text: 173, 177, 184, 1;
   }
 }
 // NEXT COLORS END

app/javascript/dashboard/components-next/AssignmentPolicy/components/ExclusionRules.vue

@@ -20,11 +20,11 @@ const excludedLabels = defineModel('excludedLabels', {
 
 const excludeOlderThanMinutes = defineModel('excludeOlderThanMinutes', {
   type: Number,
-  default: 10,
+  default: null,
 });
 
-// Duration limits: 10 minutes to 999 days (in minutes)
-const MIN_DURATION_MINUTES = 10;
+// Duration limits: 1 minute to 999 days (in minutes)
+const MIN_DURATION_MINUTES = 1;
 const MAX_DURATION_MINUTES = 1438560; // 999 days * 24 hours * 60 minutes
 
 const { t } = useI18n();

app/javascript/dashboard/components-next/AssignmentPolicy/components/InboxCapacityLimits.vue

@@ -27,7 +27,7 @@ const { t } = useI18n();
 
 const BASE_KEY = 'ASSIGNMENT_POLICY.AGENT_CAPACITY_POLICY';
 const DEFAULT_CONVERSATION_LIMIT = 10;
-const MIN_CONVERSATION_LIMIT = 1;
+const MIN_CONVERSATION_LIMIT = 0;
 const MAX_CONVERSATION_LIMIT = 100000;
 
 const selectedInboxIds = computed(
@@ -42,6 +42,7 @@ const availableInboxes = computed(() =>
 
 const isLimitValid = limit => {
   return (
+    Number.isInteger(limit.conversationLimit) &&
     limit.conversationLimit >= MIN_CONVERSATION_LIMIT &&
     limit.conversationLimit <= MAX_CONVERSATION_LIMIT
   );

app/javascript/dashboard/components-next/Campaigns/CampaignCard/CampaignCard.vue

@@ -49,6 +49,7 @@ const emit = defineEmits(['edit', 'delete']);
 const { t } = useI18n();
 
 const STATUS_COMPLETED = 'completed';
+const STATUS_PROCESSING = 'processing';
 
 const { formatMessage } = useMessageFormatter();
 
@@ -68,9 +69,15 @@ const campaignStatus = computed(() => {
       : t('CAMPAIGN.LIVE_CHAT.CARD.STATUS.DISABLED');
   }
 
-  return props.status === STATUS_COMPLETED
-    ? t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED')
-    : t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
+  if (props.status === STATUS_COMPLETED) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.COMPLETED');
+  }
+
+  if (props.status === STATUS_PROCESSING) {
+    return t('CAMPAIGN.SMS.CARD.STATUS.PROCESSING');
+  }
+
+  return t('CAMPAIGN.SMS.CARD.STATUS.SCHEDULED');
 });
 
 const inboxName = computed(() => props.inbox?.name || '');

app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { formatDistanceToNow } from 'date-fns';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -12,9 +12,8 @@ const props = defineProps({
   name: { type: String, default: '' },
   domain: { type: String, default: '' },
   contactsCount: { type: Number, default: 0 },
-  description: { type: String, default: '' },
   avatarUrl: { type: String, default: '' },
-  updatedAt: { type: [String, Number], default: null },
+  lastActivityAt: { type: [String, Number], default: null },
 });
 
 const emit = defineEmits(['showCompany']);
@@ -27,23 +26,28 @@ const displayName = computed(() => props.name || t('COMPANIES.UNNAMED'));
 
 const avatarSource = computed(() => props.avatarUrl || null);
 
-const formattedUpdatedAt = computed(() => {
-  if (!props.updatedAt) return '';
-  return formatDistanceToNow(new Date(props.updatedAt), { addSuffix: true });
+const hasContacts = computed(() => Number(props.contactsCount || 0) > 0);
+
+const contactsCountLabel = computed(() =>
+  t('COMPANIES.CONTACTS_COUNT', { n: Number(props.contactsCount || 0) })
+);
+
+const formattedLastActivityAt = computed(() => {
+  if (!props.lastActivityAt) return '';
+  return dynamicTime(props.lastActivityAt);
 });
 </script>
 
 <template>
   <CardLayout layout="row" @click="onClickViewDetails">
-    <div class="flex items-center justify-start flex-1 gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4 cursor-pointer">
       <Avatar
         :username="displayName"
         :src="avatarSource"
         class="shrink-0"
         :name="name"
-        :size="48"
+        :size="42"
         hide-offline-status
-        rounded-full
       />
       <div class="flex flex-col gap-0.5 flex-1 min-w-0">
         <div class="flex flex-wrap items-center gap-x-4 gap-y-1 min-w-0">
@@ -51,42 +55,29 @@ const formattedUpdatedAt = computed(() => {
             {{ displayName }}
           </span>
           <span
-            v-if="domain && description"
+            v-if="hasContacts"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
           >
-            <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
-            <span class="truncate">{{ domain }}</span>
+            <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
+            {{ contactsCountLabel }}
           </span>
         </div>
-        <div class="flex items-center justify-between">
-          <div class="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center min-w-0">
             <span
-              v-if="domain && !description"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
+              v-if="domain"
+              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate cursor-text"
+              @click.stop
             >
               <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
               <span class="truncate">{{ domain }}</span>
             </span>
-            <span v-if="description" class="text-sm text-n-slate-11 truncate">
-              {{ description }}
-            </span>
-            <div
-              v-if="(description || domain) && contactsCount"
-              class="w-px h-3 bg-n-slate-6"
-            />
-            <span
-              v-if="contactsCount"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-            >
-              <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
-              {{ t('COMPANIES.CONTACTS_COUNT', { n: contactsCount }) }}
-            </span>
           </div>
           <span
-            v-if="updatedAt"
+            v-if="lastActivityAt"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 flex-shrink-0"
           >
-            {{ formattedUpdatedAt }}
+            {{ formattedLastActivityAt }}
           </span>
         </div>
       </div>

app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { ref, useSlots } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['back']);
+
+const slots = useSlots();
+const isSidebarOpen = ref(false);
+
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
+};
+
+const closeMobileSidebar = () => {
+  if (!isSidebarOpen.value) {
+    return;
+  }
+
+  isSidebarOpen.value = false;
+};
+</script>
+
+<template>
+  <section
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
+  >
+    <div
+      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
+    >
+      <header class="sticky top-0 z-10 px-6 3xl:px-0">
+        <div class="w-full mx-auto max-w-[40.625rem]">
+          <div
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+          >
+            <Breadcrumb :items="breadcrumbItems" @click="emit('back')" />
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
+          <slot />
+        </div>
+      </main>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
+    >
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
+      :class="isSidebarOpen ? 'w-full' : 'w-16'"
+    >
+      <div
+        v-on-click-outside="[
+          closeMobileSidebar,
+          { ignore: ['#details-sidebar-content'] },
+        ]"
+        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
+        :class="[
+          isSidebarOpen
+            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
+            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
+        ]"
+      >
+        <Button
+          ghost
+          slate
+          sm
+          class="!rounded-full rtl:rotate-180"
+          :class="{ 'bg-n-alpha-2': isSidebarOpen }"
+          :icon="
+            isSidebarOpen
+              ? 'i-lucide-panel-right-close'
+              : 'i-lucide-panel-right-open'
+          "
+          data-details-sidebar-toggle
+          @click="toggleSidebar"
+        />
+      </div>
+
+      <Transition
+        enter-active-class="transition-transform duration-200 ease-in-out"
+        leave-active-class="transition-transform duration-200 ease-in-out"
+        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
+        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
+      >
+        <div
+          v-if="isSidebarOpen"
+          id="details-sidebar-content"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
+        >
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue

@@ -2,6 +2,7 @@
 import Input from 'dashboard/components-next/input/Input.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import CompanySortMenu from './components/CompanySortMenu.vue';
+import CompanyMoreActions from './components/CompanyMoreActions.vue';
 
 defineProps({
   showSearch: { type: Boolean, default: true },
@@ -11,7 +12,7 @@ defineProps({
   activeOrdering: { type: String, default: '' },
 });
 
-const emit = defineEmits(['search', 'update:sort']);
+const emit = defineEmits(['search', 'update:sort', 'create']);
 </script>
 
 <template>
@@ -19,22 +20,15 @@ const emit = defineEmits(['search', 'update:sort']);
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
-      <span class="text-heading-1 truncate text-n-slate-12">
+      <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-row flex-shrink-0 gap-2">
-        <div class="flex items-center">
-          <CompanySortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-        </div>
+      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
         <div v-if="showSearch" class="flex items-center gap-2 w-full">
           <Input
             :model-value="searchValue"
             type="search"
-            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :placeholder="$t('COMPANIES.SEARCH_PLACEHOLDER')"
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
@@ -49,6 +43,14 @@ const emit = defineEmits(['search', 'update:sort']);
             </template>
           </Input>
         </div>
+        <div class="flex items-center flex-shrink-0 gap-2">
+          <CompanySortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+          <CompanyMoreActions @create="emit('create')" />
+        </div>
       </div>
     </div>
   </header>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanyMoreActions.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const showActionsDropdown = ref(false);
+
+const menuItems = [
+  {
+    label: t('COMPANIES.ACTIONS.CREATE'),
+    action: 'create',
+    value: 'create',
+    icon: 'i-lucide-plus',
+  },
+];
+
+const handleAction = ({ action }) => {
+  if (action === 'create') emit('create');
+  showActionsDropdown.value = false;
+};
+</script>
+
+<template>
+  <div v-on-clickaway="() => (showActionsDropdown = false)" class="relative">
+    <Button
+      icon="i-lucide-ellipsis-vertical"
+      color="slate"
+      variant="ghost"
+      size="sm"
+      :class="showActionsDropdown ? 'bg-n-alpha-2' : ''"
+      @click="showActionsDropdown = !showActionsDropdown"
+    />
+    <DropdownMenu
+      v-if="showActionsDropdown"
+      :menu-items="menuItems"
+      class="ltr:right-0 rtl:left-0 mt-1 w-52 top-full"
+      @action="handleAction($event)"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue

@@ -35,6 +35,10 @@ const sortMenus = [
     label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
     value: 'created_at',
   },
+  {
+    label: t('COMPANIES.SORT_BY.OPTIONS.LAST_ACTIVITY_AT'),
+    value: 'last_activity_at',
+  },
   {
     label: t('COMPANIES.SORT_BY.OPTIONS.CONTACTS_COUNT'),
     value: 'contacts_count',
@@ -101,6 +105,7 @@ const handleOrderChange = value => {
           :model-value="activeSort"
           :options="sortMenus"
           :label="activeSortLabel"
+          sub-menu-position="left"
           @update:model-value="handleSortChange"
         />
       </div>
@@ -112,6 +117,7 @@ const handleOrderChange = value => {
           :model-value="activeOrdering"
           :options="orderingMenus"
           :label="activeOrderingLabel"
+          sub-menu-position="left"
           @update:model-value="handleOrderChange"
         />
       </div>

app/javascript/dashboard/components-next/Companies/CompaniesListLayout.vue

@@ -12,7 +12,12 @@ defineProps({
   showPaginationFooter: { type: Boolean, default: true },
 });
 
-const emit = defineEmits(['update:currentPage', 'update:sort', 'search']);
+const emit = defineEmits([
+  'update:currentPage',
+  'update:sort',
+  'search',
+  'create',
+]);
 
 const updateCurrentPage = page => {
   emit('update:currentPage', page);
@@ -31,6 +36,7 @@ const updateCurrentPage = page => {
         :active-ordering="activeOrdering"
         @search="emit('search', $event)"
         @update:sort="emit('update:sort', $event)"
+        @create="emit('create')"
       />
       <main class="flex-1 px-6 overflow-y-auto">
         <div class="w-full mx-auto max-w-5xl py-4">

app/javascript/dashboard/components-next/Companies/CompanyCreateDialog.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+
+defineProps({
+  isLoading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['create']);
+
+const { t } = useI18n();
+const dialogRef = ref(null);
+
+const form = reactive({ name: '', domain: '', description: '' });
+
+const isFormInvalid = computed(() => !form.name.trim());
+
+const resetForm = () => {
+  form.name = '';
+  form.domain = '';
+  form.description = '';
+};
+
+const open = (company = {}) => {
+  form.name = company.name || '';
+  form.domain = company.domain || '';
+  form.description = company.description || '';
+  dialogRef.value?.open();
+};
+
+const handleConfirm = () => {
+  if (isFormInvalid.value) return;
+
+  emit('create', {
+    name: form.name.trim(),
+    domain: form.domain.trim() || null,
+    description: form.description.trim() || null,
+  });
+};
+
+const closeDialog = () => {
+  dialogRef.value?.close();
+};
+
+const onSuccess = () => {
+  resetForm();
+  closeDialog();
+};
+
+defineExpose({ dialogRef, onSuccess, open });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    width="3xl"
+    overflow-y-auto
+    @confirm="handleConfirm"
+    @close="resetForm"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-start gap-2">
+        <span class="py-1 text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.CREATE.TITLE') }}
+        </span>
+        <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2">
+          <Input
+            v-model="form.name"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+            autofocus
+          />
+          <Input
+            v-model="form.domain"
+            :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+            :disabled="isLoading"
+            custom-input-class="h-8 !pt-1 !pb-1 [&:not(.error,.focus)]:!outline-transparent"
+          />
+        </div>
+      </div>
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isLoading"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+    </div>
+
+    <template #footer>
+      <div class="flex items-center justify-between w-full gap-3">
+        <Button
+          :label="t('DIALOG.BUTTONS.CANCEL')"
+          variant="link"
+          type="reset"
+          class="h-10 hover:!no-underline hover:text-n-brand"
+          @click="closeDialog"
+        />
+        <Button
+          :label="t('COMPANIES.CREATE.ACTIONS.SAVE')"
+          color="blue"
+          type="submit"
+          :disabled="isFormInvalid || isLoading"
+          :is-loading="isLoading"
+        />
+      </div>
+    </template>
+  </Dialog>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue

@@ -0,0 +1,354 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from '@chatwoot/utils';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  meta: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isBusy: {
+    type: Boolean,
+    default: false,
+  },
+  searchResults: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'cancelContactSelection',
+  'confirmContactSelection',
+  'removeContact',
+  'search',
+  'selectContact',
+  'update:currentPage',
+]);
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const selectedContactId = ref(null);
+const searchQuery = ref('');
+
+const hasContacts = computed(() => props.contacts.length > 0);
+const currentPage = computed(() => Number(props.meta?.page || 1));
+const totalContacts = computed(() => Number(props.meta?.totalCount || 0));
+const linkedContactIds = computed(
+  () => new Set(props.contacts.map(contact => Number(contact.id)))
+);
+const showPaginationFooter = computed(
+  () => hasContacts.value && totalContacts.value > props.contacts.length
+);
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+
+const contactMeta = contact =>
+  [contact.email, contact.phoneNumber].filter(Boolean).join(' • ');
+
+const contactName = contact =>
+  contact.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const contactOptions = computed(() =>
+  props.searchResults
+    .filter(
+      contact =>
+        !contact.linkedToCurrentCompany &&
+        !linkedContactIds.value.has(Number(contact.id))
+    )
+    .map(contact => ({
+      value: contact.id,
+      label: [contactName(contact), contact.email, contact.phoneNumber]
+        .filter(Boolean)
+        .join(' · '),
+    }))
+);
+
+const emptyState = computed(() => {
+  if (props.isSearching) {
+    return t('COMPANIES.DETAIL.CONTACTS.LOADING');
+  }
+
+  return searchQuery.value.trim()
+    ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.EMPTY')
+    : t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.INITIAL');
+});
+
+const selectedContactName = computed(() =>
+  props.selectedContact ? contactName(props.selectedContact) : ''
+);
+
+const selectedContactMeta = computed(() =>
+  props.selectedContact ? contactMeta(props.selectedContact) : ''
+);
+
+const selectedContactCompanyName = computed(
+  () => props.selectedContact?.company?.name || ''
+);
+
+const summaryRows = computed(() => [
+  {
+    key: 'company',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.COMPANY_LABEL'),
+    avatarName: props.company.name || t('COMPANIES.UNNAMED'),
+    avatarSrc: props.company.avatarUrl,
+    primary: props.company.name || t('COMPANIES.UNNAMED'),
+    secondary: props.company.domain,
+  },
+  {
+    key: 'contact',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONTACT_LABEL'),
+    badge: selectedContactCompanyName.value
+      ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CURRENT_COMPANY', {
+          companyName: selectedContactCompanyName.value,
+        })
+      : '',
+    avatarName: selectedContactName.value,
+    avatarSrc: props.selectedContact?.thumbnail,
+    primary: selectedContactName.value,
+    secondary: selectedContactMeta.value,
+  },
+]);
+
+const debouncedSearch = debounce(query => {
+  emit('search', query);
+}, 300);
+
+const handleSearch = query => {
+  searchQuery.value = query;
+  debouncedSearch(query.trim());
+};
+
+const handleContactSelect = contactId => {
+  const selectedContact = props.searchResults.find(
+    contact => contact.id === Number(contactId)
+  );
+
+  selectedContactId.value = null;
+  if (selectedContact) {
+    emit('selectContact', selectedContact);
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-6 pb-8">
+    <div v-if="!selectedContact" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.DESCRIPTION') }}
+        </span>
+      </div>
+      <ComboBox
+        use-api-results
+        :model-value="selectedContactId"
+        :options="contactOptions"
+        :disabled="isBusy"
+        :empty-state="emptyState"
+        :search-placeholder="
+          t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD')"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @search="handleSearch"
+        @update:model-value="handleContactSelect"
+      />
+    </div>
+
+    <div v-else class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_TITLE') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_DESCRIPTION') }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="row in summaryRows"
+          :key="row.key"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center justify-between h-5 gap-2">
+            <label class="text-sm text-n-slate-12">
+              {{ row.label }}
+            </label>
+            <span
+              v-if="row.badge"
+              class="px-2 py-0.5 text-xs rounded-md text-n-amber-11 bg-n-alpha-2"
+            >
+              {{ row.badge }}
+            </span>
+          </div>
+
+          <div
+            class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+          >
+            <Avatar
+              :name="row.avatarName"
+              :src="row.avatarSrc"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="flex flex-col w-full min-w-0 gap-1">
+              <span
+                class="text-sm leading-4 font-medium truncate text-n-slate-12"
+              >
+                {{ row.primary }}
+              </span>
+              <span
+                v-if="row.secondary"
+                class="text-sm leading-4 truncate text-n-slate-11"
+              >
+                {{ row.secondary }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between gap-3 mt-2">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CANCEL')"
+          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+          :disabled="isBusy"
+          @click="emit('cancelContactSelection')"
+        />
+        <Button
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.ADD')"
+          class="w-full"
+          :is-loading="isBusy"
+          :disabled="isBusy"
+          @click="emit('confirmContactSelection')"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-3">
+        <h4 class="text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.SIDEBAR.TABS.CONTACTS') }}
+        </h4>
+        <span v-if="hasContacts" class="text-xs tabular-nums text-n-slate-11">
+          {{ t('COMPANIES.CONTACTS_COUNT', { n: totalContacts }) }}
+        </span>
+      </div>
+
+      <div
+        v-if="isLoading && !hasContacts"
+        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.LOADING') }}
+      </div>
+
+      <div
+        v-else-if="!hasContacts"
+        class="py-8 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
+      </div>
+
+      <div v-else class="flex flex-col divide-y divide-n-weak">
+        <div
+          v-for="contact in contacts"
+          :key="contact.id"
+          class="flex items-center gap-2 py-3 group/contact"
+        >
+          <button
+            type="button"
+            class="flex items-center flex-1 min-w-0 !p-0 gap-3 text-start rounded-lg transition-colors text-n-slate-12 hover:text-n-blue-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-n-brand focus-visible:ring-offset-2 focus-visible:ring-offset-n-background"
+            @click="openContact(contact.id)"
+          >
+            <Avatar
+              :name="contactName(contact)"
+              :src="contact.thumbnail"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="min-w-0 space-y-0.5">
+              <span
+                class="text-sm font-medium leading-5 truncate text-n-slate-12"
+              >
+                {{ contactName(contact) }}
+              </span>
+              <p
+                v-if="contactMeta(contact)"
+                class="text-sm leading-5 truncate text-n-slate-11"
+              >
+                {{ contactMeta(contact) }}
+              </p>
+            </div>
+          </button>
+
+          <Button
+            icon="i-lucide-unlink"
+            color="slate"
+            variant="ghost"
+            size="xs"
+            class="shrink-0 opacity-70 transition-opacity sm:opacity-0 sm:group-hover/contact:opacity-100 sm:focus-visible:opacity-100"
+            :disabled="isBusy"
+            :title="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            :aria-label="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            @click.stop="emit('removeContact', contact.id)"
+          />
+        </div>
+      </div>
+
+      <PaginationFooter
+        v-if="showPaginationFooter"
+        current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
+        :current-page="currentPage"
+        :total-items="totalContacts"
+        :items-per-page="15"
+        class="!px-0 before:hidden bg-transparent"
+        @update:current-page="emit('update:currentPage', $event)"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  companyId: {
+    type: Number,
+    required: true,
+  },
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const companiesStore = useCompaniesStore();
+const { t } = useI18n();
+
+const handleDelete = async () => {
+  try {
+    await companiesStore.deleteCustomAttributes({
+      id: props.companyId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await companiesStore.update({
+      id: props.companyId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(
+  () =>
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+);
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue

@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import CompanyCustomAttributeItem from 'dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const searchQuery = ref('');
+const companyAttributes = useMapGetter('attributes/getCompanyAttributes');
+
+const customAttributes = computed(() => props.company?.customAttributes || {});
+const hasCompanyAttributes = computed(
+  () => companyAttributes.value?.length > 0
+);
+
+const processCompanyAttributes = (
+  attributes,
+  attributeValues,
+  filterCondition
+) => {
+  if (!attributes.length) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+
+    if (filterCondition(attributeKey, attributeValues)) {
+      result.push({
+        ...attribute,
+        value: attributeValues[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => key in values
+  )
+);
+
+const unusedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => !(key in values)
+  )
+);
+
+const filteredUnusedAttributes = computed(() =>
+  unusedAttributes.value.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  )
+);
+
+const unusedAttributesCount = computed(() => unusedAttributes.value.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+
+onMounted(() => {
+  store.dispatch('attributes/get');
+});
+</script>
+
+<template>
+  <div v-if="hasCompanyAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <CompanyCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="`${company.id}-${attribute.id}`"
+        is-editing-view
+        :company-id="company.id"
+        :attribute="attribute"
+      />
+    </div>
+
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-px bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">
+        {{
+          t('COMPANIES.DETAIL.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+            count: unusedAttributesCount,
+          })
+        }}
+      </span>
+      <div class="flex-1 h-px bg-n-slate-5" />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span
+          class="absolute i-lucide-search size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="t('COMPANIES.DETAIL.ATTRIBUTES.SEARCH_PLACEHOLDER')"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+
+      <div
+        v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <CompanyCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="`${company.id}-${attribute.id}`"
+          :company-id="company.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyHistorySidebar.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+defineProps({
+  conversations: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+const contactsById = useMapGetter('contacts/getContactById');
+const stateInbox = useMapGetter('inboxes/getInboxById');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+const conversationContact = conversation => {
+  const sender = conversation.meta?.sender || {};
+  const contact = contactsById.value(sender.id);
+  return contact.id ? contact : sender;
+};
+const conversationInbox = conversation =>
+  stateInbox.value(conversation.inboxId) || {
+    name: '',
+    channelType: conversation.meta?.channel,
+  };
+</script>
+
+<template>
+  <div
+    v-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <div
+    v-else-if="conversations.length > 0"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+  >
+    <ConversationCard
+      v-for="conversation in conversations"
+      :key="conversation.id"
+      :conversation="conversation"
+      :contact="conversationContact(conversation)"
+      :state-inbox="conversationInbox(conversation)"
+      :account-labels="accountLabelsValue"
+      class="rounded-none hover:rounded-xl hover:bg-n-alpha-1 dark:hover:bg-n-alpha-3"
+    />
+  </div>
+
+  <p
+    v-else
+    class="py-8 px-4 mx-6 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.HISTORY.EMPTY') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyNotesSidebar.vue

@@ -0,0 +1,114 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const props = defineProps({
+  notes: {
+    type: Array,
+    default: () => [],
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { formatMessage } = useMessageFormatter();
+const currentUser = useMapGetter('getCurrentUser');
+
+const hasNotes = computed(() => props.notes.length > 0);
+
+const contactName = contact =>
+  contact?.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const getWrittenBy = note => {
+  const isCurrentUser = note?.user?.id === currentUser.value.id;
+  return isCurrentUser
+    ? t('CONTACTS_LAYOUT.SIDEBAR.NOTES.YOU')
+    : note?.user?.name || 'Bot';
+};
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+</script>
+
+<template>
+  <div v-if="hasNotes" class="flex flex-col px-6">
+    <div class="flex flex-col divide-y divide-n-strong">
+      <div
+        v-for="note in notes"
+        :key="note.id"
+        class="flex flex-col gap-2 py-4 group/note"
+      >
+        <div class="flex items-center gap-1.5 min-w-0">
+          <Avatar
+            :name="contactName(note.contact)"
+            :src="note.contact?.thumbnail"
+            :size="16"
+            rounded-full
+            hide-offline-status
+          />
+          <div
+            class="flex items-center justify-between min-w-0 gap-1 w-full text-sm text-n-slate-11"
+          >
+            <button
+              type="button"
+              class="min-w-0 font-medium truncate text-start text-n-slate-12 hover:text-n-blue-11 p-0"
+              @click="openContact(note.contact.id)"
+            >
+              {{ contactName(note.contact) }}
+            </button>
+            <div class="min-w-0 truncate">
+              <span
+                class="inline-flex items-center gap-1 text-sm text-n-slate-10"
+              >
+                <span class="font-medium text-n-slate-11">
+                  {{ getWrittenBy(note) }}
+                </span>
+                {{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }}
+                <span class="font-medium text-n-slate-11">
+                  {{ dynamicTime(note.createdAt) }}
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+        <p
+          v-dompurify-html="formatMessage(note.content || '')"
+          class="mb-0 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0 prose-ul:mb-1 prose-ul:mt-0 text-n-slate-12"
+        />
+      </div>
+    </div>
+  </div>
+
+  <div
+    v-else-if="isLoading"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+
+  <p
+    v-else
+    class="py-8 mx-6 px-4 text-sm text-center rounded-xl border border-dashed border-n-strong text-n-slate-11"
+  >
+    {{ t('COMPANIES.DETAIL.NOTES.EMPTY') }}
+  </p>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue

@@ -0,0 +1,202 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+const props = defineProps({
+  company: { type: Object, default: () => ({}) },
+  isLoading: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+const companiesStore = useCompaniesStore();
+
+const form = reactive({ name: '', domain: '', description: '' });
+const avatarPreviewUrl = ref('');
+const isUploadingAvatar = ref(false);
+
+const uiFlags = computed(() => companiesStore.getUIFlags);
+const isUpdating = computed(() => uiFlags.value.updatingItem);
+const isAvatarBusy = computed(
+  () =>
+    isUploadingAvatar.value || uiFlags.value.deletingAvatar || isUpdating.value
+);
+
+const displayName = computed(
+  () => props.company?.name || t('COMPANIES.UNNAMED')
+);
+const avatarSource = computed(
+  () => avatarPreviewUrl.value || props.company?.avatarUrl || ''
+);
+const isFormInvalid = computed(() => !form.name.trim());
+const hasChanges = computed(
+  () =>
+    form.name.trim() !== (props.company?.name || '').trim() ||
+    form.domain.trim() !== (props.company?.domain || '').trim() ||
+    form.description.trim() !== (props.company?.description || '').trim()
+);
+
+const summary = computed(() => {
+  const { createdAt, lastActivityAt } = props.company || {};
+  return [
+    createdAt &&
+      t('COMPANIES.DETAIL.PROFILE.CREATED_AT', {
+        date: dynamicTime(createdAt),
+      }),
+    lastActivityAt &&
+      t('COMPANIES.DETAIL.PROFILE.LAST_ACTIVE', {
+        date: dynamicTime(lastActivityAt),
+      }),
+  ]
+    .filter(Boolean)
+    .join(' • ');
+});
+
+const syncForm = company => {
+  form.name = company?.name || '';
+  form.domain = company?.domain || '';
+  form.description = company?.description || '';
+};
+
+const isCurrentCompany = companyId => Number(props.company?.id) === companyId;
+
+watch(
+  () => [
+    props.company?.id,
+    props.company?.name,
+    props.company?.domain,
+    props.company?.description,
+    props.company?.avatarUrl,
+  ],
+  () => {
+    avatarPreviewUrl.value = '';
+    syncForm(props.company);
+  },
+  { immediate: true }
+);
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarPreviewUrl.value = url;
+  isUploadingAvatar.value = true;
+  try {
+    await companiesStore.update({ id: props.company.id, avatar: file });
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_SUCCESS'));
+  } catch {
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_ERROR'));
+  } finally {
+    isUploadingAvatar.value = false;
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    await companiesStore.deleteCompanyAvatar(props.company.id);
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_ERROR'));
+  }
+};
+
+const handleUpdateCompany = async () => {
+  const companyId = Number(props.company.id);
+
+  try {
+    const updated = await companiesStore.update({
+      id: companyId,
+      name: form.name.trim(),
+      domain: form.domain.trim() || null,
+      description: form.description.trim() || null,
+    });
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(updated);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_SUCCESS'));
+  } catch {
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(props.company);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_ERROR'));
+  }
+};
+</script>
+
+<template>
+  <div v-if="isLoading && !company?.id" class="text-sm text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.LOADING') }}
+  </div>
+
+  <div v-else-if="company?.id" class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :name="displayName"
+        :src="avatarSource"
+        :size="72"
+        :allow-upload="!isAvatarBusy"
+        hide-offline-status
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ displayName }}
+        </h3>
+        <span class="text-sm leading-6 text-n-slate-11">{{ summary }}</span>
+        <p
+          v-if="isUploadingAvatar || uiFlags.deletingAvatar"
+          class="text-sm text-n-slate-11"
+        >
+          {{ t('COMPANIES.DETAIL.AVATAR.UPDATING') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start w-full gap-6">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('COMPANIES.DETAIL.PROFILE.TITLE') }}
+      </span>
+
+      <div class="grid w-full gap-4 sm:grid-cols-2">
+        <Input
+          v-model="form.name"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+        <Input
+          v-model="form.domain"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+      </div>
+
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isUpdating"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+
+      <Button
+        :label="t('COMPANIES.DETAIL.PROFILE.ACTIONS.SAVE')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid || !hasChanges"
+        @click="handleUpdateCompany"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const description = computed(() =>
+  props.company?.name
+    ? t('COMPANIES.DETAIL.DELETE.DESCRIPTION_WITH_NAME', {
+        companyName: props.company.name,
+      })
+    : t('COMPANIES.DETAIL.DELETE.DESCRIPTION')
+);
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('COMPANIES.DETAIL.DELETE.TITLE')"
+    :description="description"
+    :confirm-button-label="t('COMPANIES.DETAIL.DELETE.CONFIRM')"
+    :is-loading="isLoading"
+    @confirm="emit('confirm')"
+  />
+</template>

app/javascript/dashboard/components-next/Companies/CompanySelector.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDebounceFn } from '@vueuse/core';
+import CompanyAPI from 'dashboard/api/companies';
+import { useAlert } from 'dashboard/composables';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import CompanyCreateDialog from 'dashboard/components-next/Companies/CompanyCreateDialog.vue';
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: '',
+  },
+  // Name of the linked company, so the label shows before the list is loaded.
+  selectedName: {
+    type: String,
+    default: '',
+  },
+  isDetailsView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['select']);
+
+const { t } = useI18n();
+
+const CREATE_PREFIX = 'create:';
+
+const options = ref([]);
+const searchQuery = ref('');
+const createDialogRef = ref(null);
+const isCreatingCompany = ref(false);
+
+const toOption = company => ({ label: company.name, value: company.id });
+
+const createOption = computed(() => {
+  const name = searchQuery.value.trim();
+  if (!name) return null;
+
+  const exists = options.value.some(
+    option => option.label.toLowerCase() === name.toLowerCase()
+  );
+  if (exists) return null;
+
+  return {
+    label: t('COMPANIES.SELECTOR.CREATE_OPTION', { name }),
+    value: `${CREATE_PREFIX}${name}`,
+  };
+});
+
+const comboboxOptions = computed(() => {
+  const list = [...options.value];
+
+  // Keep the linked company visible even when it is not in the loaded results.
+  if (
+    props.modelValue &&
+    props.selectedName &&
+    !list.some(option => option.value === Number(props.modelValue))
+  ) {
+    list.unshift({
+      label: props.selectedName,
+      value: Number(props.modelValue),
+    });
+  }
+
+  if (createOption.value) list.push(createOption.value);
+  return list;
+});
+
+const fetchCompanies = async query => {
+  try {
+    const {
+      data: { payload },
+    } = query
+      ? await CompanyAPI.search(query)
+      : await CompanyAPI.get({ page: 1 });
+    options.value = (payload || []).map(toOption);
+  } catch {
+    options.value = [];
+  }
+};
+
+// Fetch lazily, only when the dropdown opens, instead of on mount.
+const handleOpen = () => {
+  searchQuery.value = '';
+  fetchCompanies('');
+};
+
+const handleSearch = useDebounceFn(query => {
+  searchQuery.value = query?.trim() || '';
+  fetchCompanies(searchQuery.value);
+}, 300);
+
+// Open the create dialog (prefilled with the typed name) so the user can add
+// domain/description before saving, instead of creating with just a name.
+const createCompany = async company => {
+  isCreatingCompany.value = true;
+  try {
+    const {
+      data: { payload },
+    } = await CompanyAPI.create({ company });
+    createDialogRef.value?.onSuccess();
+    emit('select', { id: payload.id, name: payload.name });
+    useAlert(t('COMPANIES.CREATE.MESSAGES.SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.CREATE.MESSAGES.ERROR'));
+  } finally {
+    isCreatingCompany.value = false;
+  }
+};
+
+const handleSelect = value => {
+  if (typeof value === 'string' && value.startsWith(CREATE_PREFIX)) {
+    createDialogRef.value?.open({ name: value.slice(CREATE_PREFIX.length) });
+    // Drop the transient "Add …" option so the button label doesn't stick to
+    // it if the dialog is dismissed without creating.
+    searchQuery.value = '';
+    return;
+  }
+
+  const id = value ? Number(value) : '';
+  const selected = comboboxOptions.value.find(option => option.value === id);
+  emit('select', { id, name: selected?.label || '' });
+};
+</script>
+
+<template>
+  <ComboBox
+    :model-value="modelValue"
+    :options="comboboxOptions"
+    :display-label="selectedName"
+    :placeholder="t('COMPANIES.SELECTOR.PLACEHOLDER')"
+    :search-placeholder="t('COMPANIES.SEARCH_PLACEHOLDER')"
+    use-api-results
+    class="[&>div>button]:h-8 [&>div>div_ul]:max-h-56"
+    :class="{
+      '[&>div>button]:bg-n-alpha-black2 [&>div>button:not(.focused)]:!outline-transparent':
+        !isDetailsView,
+      '[&>div>button]:!bg-n-alpha-black2': isDetailsView,
+    }"
+    @open="handleOpen"
+    @search="handleSearch"
+    @update:model-value="handleSelect"
+  />
+  <CompanyCreateDialog
+    ref="createDialogRef"
+    :is-loading="isCreatingCompany"
+    @create="createCompany"
+  />
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue

@@ -15,6 +15,7 @@ const props = defineProps({
   id: { type: Number, required: true },
   name: { type: String, default: '' },
   email: { type: String, default: '' },
+  companyId: { type: [Number, String], default: '' },
   additionalAttributes: { type: Object, default: () => ({}) },
   phoneNumber: { type: String, default: '' },
   thumbnail: { type: String, default: '' },
@@ -41,6 +42,7 @@ const getInitialContactData = () => ({
   id: props.id,
   name: props.name,
   email: props.email,
+  companyId: props.companyId,
   phoneNumber: props.phoneNumber,
   additionalAttributes: props.additionalAttributes,
 });
@@ -51,7 +53,6 @@ const isFormInvalid = computed(() => contactsFormRef.value?.isFormInvalid);
 
 const countriesMap = computed(() => {
   return countries.reduce((acc, country) => {
-    acc[country.code] = country;
     acc[country.id] = country;
     return acc;
   }, {});
@@ -125,10 +126,9 @@ const handleAvatarHover = isHovered => {
           <Avatar
             :name="name"
             :src="thumbnail"
-            :size="48"
+            :size="42"
             :status="availabilityStatus"
             hide-offline-status
-            rounded-full
           >
             <template v-if="selectable" #overlay="{ size }">
               <label

app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue

@@ -107,11 +107,10 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger="{ toggle }">
+                <template #trigger>
                   <Button
                     :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
                     size="sm"
-                    @click="toggle"
                   />
                 </template>
               </ComposeConversation>
@@ -129,9 +128,14 @@ const closeMobileSidebar = () => {
     <!-- Desktop sidebar -->
     <div
       v-if="slots.sidebar"
-      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+      class="hidden lg:flex flex-col min-w-52 w-full max-w-md border-l border-n-weak bg-n-solid-2"
     >
-      <slot name="sidebar" />
+      <div class="shrink-0">
+        <slot name="sidebarHeader" />
+      </div>
+      <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
+        <slot name="sidebar" />
+      </div>
     </div>
 
     <!-- Mobile sidebar container -->
@@ -180,9 +184,14 @@ const closeMobileSidebar = () => {
         <div
           v-if="isContactSidebarOpen"
           id="contact-sidebar-content"
-          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+          class="order-2 w-[85%] sm:w-[50%] flex flex-col bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak shadow-lg"
         >
-          <slot name="sidebar" />
+          <div class="shrink-0">
+            <slot name="sidebarHeader" />
+          </div>
+          <div class="flex-1 min-h-0 overflow-y-auto pb-6 pt-3">
+            <slot name="sidebar" />
+          </div>
         </div>
       </Transition>
     </div>

app/javascript/dashboard/components-next/Contacts/ContactsForm/ContactsForm.vue

@@ -5,8 +5,11 @@ import { required, email } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { splitName } from '@chatwoot/utils';
 import countries from 'shared/constants/countries.js';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useAccount } from 'dashboard/composables/useAccount';
 import Input from 'dashboard/components-next/input/Input.vue';
 import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import CompanySelector from 'dashboard/components-next/Companies/CompanySelector.vue';
 import Icon from 'dashboard/components-next/icon/Icon.vue';
 import PhoneNumberInput from 'dashboard/components-next/phonenumberinput/PhoneNumberInput.vue';
 
@@ -28,6 +31,7 @@ const props = defineProps({
 const emit = defineEmits(['update']);
 
 const { t } = useI18n();
+const { currentAccount, isCloudFeatureEnabled } = useAccount();
 
 const FORM_CONFIG = {
   FIRST_NAME: { field: 'firstName' },
@@ -54,6 +58,7 @@ const defaultState = {
   id: 0,
   name: '',
   email: '',
+  companyId: '',
   firstName: '',
   lastName: '',
   phoneNumber: '',
@@ -85,6 +90,23 @@ const validationRules = {
 const v$ = useVuelidate(validationRules, state);
 
 const isFormInvalid = computed(() => v$.value.$invalid);
+const hasCompaniesFeature = computed(
+  () =>
+    currentAccount.value?.id && isCloudFeatureEnabled(FEATURE_FLAGS.COMPANIES)
+);
+const showCompanySelector = computed(
+  () =>
+    hasCompaniesFeature.value &&
+    (Boolean(state.companyId) || !state.additionalAttributes.companyName)
+);
+
+const emitContactUpdate = async () => {
+  const isFormValid = await v$.value.$validate();
+  if (!isFormValid) return;
+
+  const { firstName, lastName, ...stateWithoutNames } = state;
+  emit('update', stateWithoutNames);
+};
 
 const prepareStateBasedOnProps = () => {
   if (props.isNewContact) {
@@ -96,6 +118,7 @@ const prepareStateBasedOnProps = () => {
     name = '',
     email: emailAddress,
     phoneNumber,
+    companyId = '',
     additionalAttributes = {},
   } = props.contactData || {};
   const { firstName, lastName } = splitName(name || '');
@@ -115,6 +138,7 @@ const prepareStateBasedOnProps = () => {
   Object.assign(state, {
     id,
     name,
+    companyId: companyId || '',
     firstName,
     lastName,
     email: emailAddress,
@@ -200,11 +224,7 @@ const getFormBinding = key => {
         }
       }
 
-      const isFormValid = await v$.value.$validate();
-      if (isFormValid) {
-        const { firstName, lastName, ...stateWithoutNames } = state;
-        emit('update', stateWithoutNames);
-      }
+      await emitContactUpdate();
     },
   });
 };
@@ -221,6 +241,12 @@ const handleCountrySelection = value => {
   emit('update', state);
 };
 
+const handleCompanySelection = async ({ id, name }) => {
+  state.companyId = id || '';
+  state.additionalAttributes.companyName = name || '';
+  await emitContactUpdate();
+};
+
 const resetValidation = () => {
   v$.value.$reset();
 };
@@ -273,6 +299,13 @@ defineExpose({
             :placeholder="item.placeholder"
             :show-border="isDetailsView"
           />
+          <CompanySelector
+            v-else-if="item.key === 'COMPANY_NAME' && showCompanySelector"
+            :model-value="state.companyId"
+            :selected-name="state.additionalAttributes.companyName"
+            :is-details-view="isDetailsView"
+            @select="handleCompanySelection"
+          />
           <Input
             v-else
             v-model="getFormBinding(item.key).value"

app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue

@@ -32,7 +32,7 @@ const emit = defineEmits([
 </script>
 
 <template>
-  <header class="sticky top-0 z-10 px-6">
+  <header class="sticky top-0 z-20 px-6">
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
@@ -114,8 +114,8 @@ const emit = defineEmits([
           </div>
           <div class="w-px h-4 bg-n-strong" />
           <ComposeConversation>
-            <template #trigger="{ toggle }">
-              <Button :label="buttonLabel" size="sm" @click="toggle" />
+            <template #trigger>
+              <Button :label="buttonLabel" size="sm" />
             </template>
           </ComposeConversation>
         </div>

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactMoreActions.vue

@@ -1,34 +1,48 @@
 <script setup>
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import { usePolicy } from 'dashboard/composables/usePolicy';
 
 const emit = defineEmits(['add', 'import', 'export']);
 
 const { t } = useI18n();
+const { checkPermissions } = usePolicy();
 
-const contactMenuItems = [
+const contactMenuItems = computed(() => [
   {
     label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.ADD_CONTACT'),
     action: 'add',
     value: 'add',
     icon: 'i-lucide-plus',
   },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'),
-    action: 'export',
-    value: 'export',
-    icon: 'i-lucide-upload',
-  },
-  {
-    label: t('CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'),
-    action: 'import',
-    value: 'import',
-    icon: 'i-lucide-download',
-  },
-];
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.EXPORT_CONTACT'
+          ),
+          action: 'export',
+          value: 'export',
+          icon: 'i-lucide-upload',
+        },
+      ]
+    : []),
+  ...(checkPermissions(['administrator', 'contact_manage'])
+    ? [
+        {
+          label: t(
+            'CONTACTS_LAYOUT.HEADER.ACTIONS.CONTACT_CREATION.IMPORT_CONTACT'
+          ),
+          action: 'import',
+          value: 'import',
+          icon: 'i-lucide-download',
+        },
+      ]
+    : []),
+]);
 const showActionsDropdown = ref(false);
 
 const handleContactAction = ({ action }) => {

app/javascript/dashboard/components-next/Contacts/ContactsHeader/components/ContactSortMenu.vue

@@ -105,7 +105,7 @@ const handleOrderChange = value => {
     <div
       v-if="isMenuOpen"
       v-on-clickaway="() => (isMenuOpen = false)"
-      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4"
+      class="absolute top-full mt-1 ltr:-right-32 rtl:-left-32 sm:ltr:right-0 sm:rtl:left-0 flex flex-col gap-4 bg-n-alpha-3 backdrop-blur-[100px] border border-n-weak w-72 rounded-xl p-4 z-50"
     >
       <div class="flex items-center justify-between gap-2">
         <span class="text-sm text-n-slate-12">

app/javascript/dashboard/components-next/Contacts/ContactsListLayout.vue

@@ -103,6 +103,7 @@ const showPagination = computed(() => {
           <ContactsActiveFiltersPreview
             v-if="showActiveFiltersPreview"
             :active-segment="activeSegment"
+            class="mb-1"
             @clear-filters="emit('clearFilters')"
             @open-filter="openFilter"
           />

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactCustomAttributes.vue

@@ -108,7 +108,7 @@ const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
 </script>
 
 <template>
-  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6 py-6">
+  <div v-if="hasContactAttributes" class="flex flex-col gap-6 px-6">
     <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
       <ContactCustomAttributeItem
         v-for="attribute in usedAttributes"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -36,7 +36,7 @@ const contactConversations = computed(() =>
   </div>
   <div
     v-else-if="contactConversations.length > 0"
-    class="px-6 py-4 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
+    class="px-6 divide-y divide-n-strong [&>*:hover]:!border-y-transparent [&>*:hover+*]:!border-t-transparent"
   >
     <ConversationCard
       v-for="conversation in contactConversations"

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMedia.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore, useMapGetter } from 'dashboard/composables/store';
+import {
+  MEDIA_TYPES,
+  NON_FILE_TYPES,
+} from 'dashboard/components-next/message/constants';
+
+import GalleryView from 'dashboard/components/widgets/conversation/components/GalleryView.vue';
+import Media from 'dashboard/components-next/SharedAttachments/Media.vue';
+import Files from 'dashboard/components-next/SharedAttachments/Files.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+
+const MEDIA_PEEK_LIMIT = 12;
+const FILES_PEEK_LIMIT = 6;
+
+const route = useRoute();
+const router = useRouter();
+const store = useStore();
+const { t } = useI18n();
+
+const attachmentsByContact = useMapGetter('contacts/getContactAttachments');
+const uiFlags = useMapGetter('contacts/getUIFlags');
+
+const attachments = computed(() =>
+  attachmentsByContact.value(route.params.contactId)
+);
+const isFetching = computed(() => uiFlags.value.isFetchingAttachments);
+
+const hasContent = computed(() =>
+  attachments.value.some(
+    a => a.data_url && !NON_FILE_TYPES.includes(a.file_type)
+  )
+);
+
+const mediaAttachments = computed(() =>
+  attachments.value
+    .filter(a => MEDIA_TYPES.includes(a.file_type) && a.data_url)
+    .sort((a, b) => (b.created_at || 0) - (a.created_at || 0))
+);
+
+const showGallery = ref(false);
+const selectedAttachment = ref(null);
+
+const onMediaSelect = attachment => {
+  selectedAttachment.value = attachment;
+  showGallery.value = true;
+};
+
+const onFileSelect = attachment => {
+  if (attachment.data_url) {
+    window.open(attachment.data_url, '_blank', 'noopener,noreferrer');
+  }
+};
+
+const onJumpToMessage = attachment => {
+  if (!attachment.conversation_id || !attachment.message_id) return;
+  router.push({
+    name: 'inbox_conversation',
+    params: {
+      accountId: route.params.accountId,
+      conversation_id: attachment.conversation_id,
+    },
+    query: { messageId: attachment.message_id },
+  });
+};
+
+onMounted(() => {
+  store.dispatch('contacts/fetchAttachments', route.params.contactId);
+});
+</script>
+
+<template>
+  <div class="px-6">
+    <div v-if="isFetching" class="flex justify-center p-3">
+      <Spinner class="size-5" />
+    </div>
+    <p v-else-if="!hasContent" class="p-3 text-sm text-center text-n-slate-11">
+      {{ t('CONVERSATION_SIDEBAR.SHARED_FILES.EMPTY') }}
+    </p>
+    <div v-else class="flex flex-col gap-5">
+      <Media
+        :attachments="attachments"
+        :peek-limit="MEDIA_PEEK_LIMIT"
+        show-jump-to-message
+        @select="onMediaSelect"
+        @jump-to-message="onJumpToMessage"
+      />
+      <Files
+        :attachments="attachments"
+        :peek-limit="FILES_PEEK_LIMIT"
+        show-jump-to-message
+        @select="onFileSelect"
+        @jump-to-message="onJumpToMessage"
+      />
+    </div>
+    <GalleryView
+      v-if="showGallery && selectedAttachment"
+      v-model:show="showGallery"
+      :attachment="selectedAttachment"
+      :all-attachments="mediaAttachments"
+      auto-play
+      @close="showGallery = false"
+    />
+  </div>
+</template>

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactMerge.vue

@@ -103,7 +103,7 @@ const onMergeContacts = async () => {
 </script>
 
 <template>
-  <div class="flex flex-col gap-8 px-6 py-6">
+  <div class="flex flex-col gap-8 px-6">
     <div class="flex flex-col gap-2">
       <h4 class="text-base text-n-slate-12">
         {{ t('CONTACTS_LAYOUT.SIDEBAR.MERGE.TITLE') }}

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue

@@ -55,7 +55,7 @@ useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <div class="flex flex-col gap-6 py-6">
+  <div class="flex flex-col gap-6">
     <Editor
       v-model="state.message"
       :placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"

app/javascript/dashboard/components-next/Contacts/Pages/ContactsList.vue

@@ -92,6 +92,7 @@ const handleAvatarHover = (id, isHovered) => {
         :id="contact.id"
         :name="contact.name"
         :email="contact.email"
+        :company-id="contact.companyId"
         :thumbnail="contact.thumbnail"
         :phone-number="contact.phoneNumber"
         :additional-attributes="contact.additionalAttributes"

app/javascript/dashboard/components-next/Contacts/VoiceCallButton.vue

@@ -3,10 +3,20 @@ import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useMapGetter, useStore } from 'dashboard/composables/store';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
+import {
+  isVoiceCallEnabled,
+  getVoiceCallProvider,
+  VOICE_CALL_PROVIDERS,
+} from 'dashboard/helper/inbox';
+import {
+  VOICE_CALL_DIRECTION,
+  VOICE_CALL_OUTBOUND_INIT_STATUS,
+} from 'dashboard/components-next/message/constants';
 import { useAlert } from 'dashboard/composables';
 import { frontendURL, conversationUrl } from 'dashboard/helper/URLHelper';
 import { useCallsStore } from 'dashboard/stores/calls';
+import { useWhatsappCallSession } from 'dashboard/composables/useWhatsappCallSession';
+import ContactAPI from 'dashboard/api/contacts';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
@@ -14,6 +24,9 @@ import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 const props = defineProps({
   phone: { type: String, default: '' },
   contactId: { type: [String, Number], required: true },
+  // When set, the WhatsApp call continues in this conversation (matching the
+  // header button) instead of looking up the contact's most recent one.
+  conversationId: { type: [String, Number], default: null },
   label: { type: String, default: '' },
   icon: { type: [String, Object, Function], default: '' },
   size: { type: String, default: 'sm' },
@@ -30,23 +43,31 @@ const { t } = useI18n();
 
 const dialogRef = ref(null);
 
+const callsStore = useCallsStore();
 const inboxesList = useMapGetter('inboxes/getInboxes');
 const contactsUiFlags = useMapGetter('contacts/getUIFlags');
 
 const voiceInboxes = computed(() =>
-  (inboxesList.value || []).filter(
-    inbox => inbox.channel_type === INBOX_TYPES.VOICE
-  )
+  (inboxesList.value || []).filter(isVoiceCallEnabled)
 );
 const hasVoiceInboxes = computed(() => voiceInboxes.value.length > 0);
 
-// Unified behavior: hide when no phone
 const shouldRender = computed(() => hasVoiceInboxes.value && !!props.phone);
 
 const isInitiatingCall = computed(() => {
   return contactsUiFlags.value?.isInitiatingCall || false;
 });
 
+// Mirror the conversation-header button: block a new call whenever any provider
+// call is already active or ringing, otherwise starting a WhatsApp call here
+// would leave a still-live Twilio (or other) session with no visible control.
+const isCallButtonDisabled = computed(
+  () =>
+    callsStore.hasActiveCall ||
+    callsStore.hasIncomingCall ||
+    isInitiatingCall.value
+);
+
 const navigateToConversation = conversationId => {
   const accountId = route.params.accountId;
   if (conversationId && accountId) {
@@ -60,23 +81,96 @@ const navigateToConversation = conversationId => {
   }
 };
 
-const startCall = async inboxId => {
-  if (isInitiatingCall.value) return;
+const whatsappCallSession = useWhatsappCallSession();
+
+// Find the most recent open conversation for this contact in the picked inbox.
+// WhatsApp /initiate is conversation-scoped (unlike Twilio's contact-scoped path).
+// Pass inboxId so the BE applies the filter before the 20-row cap — without it,
+// contacts whose latest WhatsApp conversation falls outside the 20 most recent
+// across all inboxes would be treated as having no conversation.
+const findWhatsappConversationId = async inboxId => {
+  const { data } = await ContactAPI.getConversations(props.contactId, {
+    inboxId,
+  });
+  const conversations = data?.payload || [];
+  const match = [...conversations].sort(
+    (a, b) => (b.last_activity_at || 0) - (a.last_activity_at || 0)
+  )[0];
+  return match?.id || null;
+};
+
+const startWhatsappCall = async (inboxId, conversationIdHint) => {
+  // WhatsApp /initiate is conversation-scoped, so we must hand it a
+  // conversation. Use the caller's hint when given (in-conversation flow);
+  // otherwise pick the most recent one in the inbox.
+  const conversationId =
+    conversationIdHint || (await findWhatsappConversationId(inboxId));
+  if (!conversationId) {
+    useAlert(t('CONTACT_PANEL.CALL_FAILED'));
+    return;
+  }
+
+  const response =
+    await whatsappCallSession.initiateOutboundCall(conversationId);
+  // The composable returns { status: 'locked' } when an init is already in
+  // flight or a call is already active; treat that as a soft no-op rather than
+  // claiming success.
+  if (response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.LOCKED) return;
+  if (!response?.id) {
+    // Permission template path returns no call id. Mirror the header button and
+    // surface whether the request was just sent or is already pending instead of
+    // claiming the call started. The permission message lands in the
+    // conversation, so still navigate there.
+    const messageKey =
+      response?.status === VOICE_CALL_OUTBOUND_INIT_STATUS.PERMISSION_PENDING
+        ? 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_PENDING'
+        : 'CONTACT_PANEL.WHATSAPP_CALL_PERMISSION_REQUESTED';
+    useAlert(t(messageKey));
+    navigateToConversation(conversationId);
+    return;
+  }
+
+  // Stay non-active until the connect cable event arrives — flipping to active
+  // here would start the duration timer before the contact picks up.
+  callsStore.addCall({
+    callSid: response.call_id,
+    callId: response.id,
+    conversationId,
+    inboxId,
+    callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
+    provider: VOICE_CALL_PROVIDERS.WHATSAPP,
+  });
+
+  useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
+  navigateToConversation(conversationId);
+};
+
+const startCall = async (inboxId, conversationIdHint = null) => {
+  if (isCallButtonDisabled.value) return;
+
+  const inbox = (inboxesList.value || []).find(i => i.id === inboxId);
+  if (getVoiceCallProvider(inbox) === VOICE_CALL_PROVIDERS.WHATSAPP) {
+    try {
+      await startWhatsappCall(inboxId, conversationIdHint);
+    } catch (error) {
+      useAlert(error?.message || t('CONTACT_PANEL.CALL_FAILED'));
+    }
+    return;
+  }
 
   try {
     const response = await store.dispatch('contacts/initiateCall', {
       contactId: props.contactId,
       inboxId,
+      conversationId: conversationIdHint,
     });
     const { call_sid: callSid, conversation_id: conversationId } = response;
 
-    // Add call to store immediately so widget shows
-    const callsStore = useCallsStore();
     callsStore.addCall({
       callSid,
       conversationId,
       inboxId,
-      callDirection: 'outbound',
+      callDirection: VOICE_CALL_DIRECTION.OUTBOUND,
     });
 
     useAlert(t('CONTACT_PANEL.CALL_INITIATED'));
@@ -88,6 +182,22 @@ const startCall = async inboxId => {
 };
 
 const onClick = async () => {
+  // In conversation context, only stay in this conversation if its inbox is
+  // itself voice-capable (works the same for Twilio and WhatsApp). For
+  // non-voice channels (email, web, …) fall back to the picker so the call
+  // goes out via a voice inbox.
+  if (props.conversationId) {
+    const conversation = store.getters.getConversationById(
+      props.conversationId
+    );
+    const conversationInbox = (inboxesList.value || []).find(
+      i => i.id === conversation?.inbox_id
+    );
+    if (conversationInbox && isVoiceCallEnabled(conversationInbox)) {
+      await startCall(conversationInbox.id, props.conversationId);
+      return;
+    }
+  }
   if (voiceInboxes.value.length > 1) {
     dialogRef.value?.open();
     return;
@@ -108,7 +218,7 @@ const onPickInbox = async inbox => {
       v-if="shouldRender"
       v-tooltip.top-end="tooltipLabel || null"
       v-bind="attrs"
-      :disabled="isInitiatingCall"
+      :disabled="isCallButtonDisabled"
       :is-loading="isInitiatingCall"
       :label="label"
       :icon="icon"

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardAvatar.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref, computed } from 'vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+
+const props = defineProps({
+  contact: { type: Object, required: true },
+  selected: { type: Boolean, default: false },
+  enableSelection: { type: Boolean, default: true },
+  hideThumbnail: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(['selectConversation']);
+
+const hovered = ref(false);
+
+const onThumbnailHover = () => {
+  hovered.value = !props.hideThumbnail;
+};
+
+const onThumbnailLeave = () => {
+  hovered.value = false;
+};
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    emit('selectConversation', value);
+  },
+});
+</script>
+
+<template>
+  <div
+    class="relative flex items-center flex-shrink-0"
+    @mouseenter="onThumbnailHover"
+    @mouseleave="onThumbnailLeave"
+  >
+    <Avatar
+      v-if="!hideThumbnail"
+      :name="contact.name"
+      :src="contact.thumbnail"
+      :size="24"
+      :status="contact.availability_status"
+      hide-offline-status
+    >
+      <template v-if="enableSelection" #overlay>
+        <div
+          v-if="hovered || selected"
+          class="flex items-center justify-center rounded-md cursor-pointer absolute inset-0 z-10 backdrop-blur-[2px] size-6"
+          @click.stop
+        >
+          <Checkbox v-model="selectedModel" />
+        </div>
+      </template>
+    </Avatar>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardContent.vue

@@ -0,0 +1,47 @@
+<script setup>
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import MessagePreview from './MessagePreview.vue';
+import VoiceCallStatus from './VoiceCallStatus.vue';
+import UnreadBadge from './UnreadBadge.vue';
+
+defineProps({
+  lastMessage: { type: Object, default: null },
+  voiceCallStatus: { type: String, default: '' },
+  voiceCallDirection: { type: String, default: '' },
+  unreadCount: { type: Number, default: 0 },
+  showExpandedPreview: { type: Boolean, default: false },
+});
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[1fr_auto] gap-1.5"
+    :class="showExpandedPreview ? 'items-end' : 'items-center'"
+  >
+    <VoiceCallStatus
+      v-if="voiceCallStatus"
+      key="voice-status-row"
+      :status="voiceCallStatus"
+      :direction="voiceCallDirection"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <MessagePreview
+      v-else-if="lastMessage"
+      key="message-preview"
+      :message="lastMessage"
+      :multi-line="showExpandedPreview"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    />
+    <span
+      v-else
+      key="no-messages"
+      class="inline-grid grid-flow-col auto-cols-max items-center gap-1 text-body-main"
+      :class="unreadCount > 0 ? 'text-n-slate-12' : 'text-n-slate-11'"
+    >
+      <Icon icon="i-lucide-info" class="size-3.5" />
+      {{ $t(`CHAT_LIST.NO_MESSAGES`) }}
+    </span>
+
+    <UnreadBadge :count="unreadCount" :align-bottom="showExpandedPreview" />
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardLabelsV5.vue

@@ -0,0 +1,175 @@
+<script setup>
+import { ref, computed, nextTick, useSlots, watch, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useThrottleFn } from '@vueuse/core';
+import { useMapGetter } from 'dashboard/composables/store';
+
+import Button from 'dashboard/components-next/button/Button.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  labels: {
+    type: Array,
+    default: () => [],
+  },
+  disableToggle: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+defineOptions({ inheritAttrs: false });
+
+const attrs = useAttrs();
+const slots = useSlots();
+const { t } = useI18n();
+
+const accountLabels = useMapGetter('labels/getLabels');
+
+const activeLabels = computed(() => {
+  return accountLabels.value.filter(({ title }) =>
+    props.labels.includes(title)
+  );
+});
+
+const showAllLabels = ref(false);
+const showExpandLabelButton = ref(false);
+const labelPosition = ref(-1);
+const labelContainer = ref(null);
+
+// Show if there are labels OR if before slot exists
+const showSection = computed(
+  () => activeLabels.value.length > 0 || !!slots.before
+);
+
+const computeVisibleLabelPosition = () => {
+  const container = labelContainer.value;
+  if (!container || activeLabels.value.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  const labels = container.querySelectorAll('[data-label]');
+  if (labels.length === 0) {
+    showExpandLabelButton.value = false;
+    return;
+  }
+
+  // Early exit if all labels are visible
+  if (showAllLabels.value) return;
+
+  const beforeSlot = container.querySelector('[data-before-slot]');
+  const beforeSlotWidth = beforeSlot?.offsetWidth ?? 0;
+  const availableWidth = container.clientWidth - 46 - beforeSlotWidth;
+
+  let totalWidth = 0;
+  const labelsArray = Array.from(labels);
+
+  // Find last visible label index using some() - stops early on overflow
+  const overflowIndex = labelsArray.findIndex(label => {
+    totalWidth += label.offsetWidth + 6;
+    return totalWidth > availableWidth;
+  });
+
+  const visibleIndex =
+    overflowIndex === -1 ? labelsArray.length - 1 : overflowIndex - 1;
+
+  labelPosition.value = visibleIndex;
+  showExpandLabelButton.value = visibleIndex < labelsArray.length - 1;
+};
+
+const throttledCalculate = useThrottleFn(computeVisibleLabelPosition, 16);
+
+watch(activeLabels, () => nextTick(throttledCalculate), { immediate: true });
+
+const hiddenLabelsCount = computed(() => {
+  if (!showExpandLabelButton.value || showAllLabels.value) return 0;
+  return activeLabels.value.length - labelPosition.value - 1;
+});
+
+// Check if all labels are hidden (none visible)
+const allLabelsHidden = computed(() => {
+  return labelPosition.value === -1 && activeLabels.value.length > 0;
+});
+
+// Label text for button when disableToggle is true and all labels are hidden
+const labelsCountText = computed(() => {
+  if (props.disableToggle && allLabelsHidden.value) {
+    return t('CONVERSATION.CARD.LABELS_COUNT', {
+      count: activeLabels.value.length,
+    });
+  }
+  if (!showAllLabels.value && hiddenLabelsCount.value > 0) {
+    return hiddenLabelsCount.value;
+  }
+  return '';
+});
+
+const hiddenLabelsTooltip = computed(() => {
+  if (!props.disableToggle) return '';
+  // When all labels are hidden, show all label titles
+  if (allLabelsHidden.value) {
+    return activeLabels.value.map(label => label.title).join(', ');
+  }
+  if (!showExpandLabelButton.value) return '';
+  const hiddenLabels = activeLabels.value.slice(labelPosition.value + 1);
+  return hiddenLabels.map(label => label.title).join(', ');
+});
+
+const tooltipText = computed(() => {
+  if (props.disableToggle && hiddenLabelsTooltip.value) {
+    return hiddenLabelsTooltip.value;
+  }
+  return showAllLabels.value
+    ? t('CONVERSATION.CARD.HIDE_LABELS')
+    : t('CONVERSATION.CARD.SHOW_LABELS');
+});
+
+const onShowLabels = e => {
+  e.stopPropagation();
+  if (props.disableToggle) return;
+  showAllLabels.value = !showAllLabels.value;
+  nextTick(() => computeVisibleLabelPosition());
+};
+</script>
+
+<template>
+  <div
+    v-if="showSection"
+    ref="labelContainer"
+    v-bind="attrs"
+    v-resize="throttledCalculate"
+    data-labels-container
+    class="flex items-center flex-shrink min-w-0 min-h-6 gap-x-1.5 gap-y-1 [&:not(:has([data-label],[data-before-slot]))]:hidden"
+    :class="{ 'h-auto overflow-visible flex-row flex-wrap': showAllLabels }"
+  >
+    <slot name="before" />
+
+    <Label
+      v-for="(label, index) in activeLabels"
+      :key="label ? label.id : index"
+      data-label
+      :label="label"
+      compact
+      :class="{
+        'invisible absolute': !showAllLabels && index > labelPosition,
+      }"
+    />
+    <Button
+      v-if="showExpandLabelButton || (disableToggle && allLabelsHidden)"
+      v-tooltip.top="{
+        content: tooltipText,
+        delay: { show: 500, hide: 0 },
+      }"
+      :label="labelsCountText"
+      xs
+      slate
+      :no-animation="disableToggle"
+      :icon="labelsCountText ? 'i-lucide-plus' : 'i-lucide-chevron-left'"
+      class="!py-0 !px-1.5 flex-shrink-0 !rounded-md !bg-n-button-color -outline-offset-1 !gap-0.5 [&>span:first-child]:!text-n-slate-10 [&>span:last-child]:!text-n-slate-11"
+      :class="{ 'cursor-default': disableToggle }"
+      @click="onShowLabels"
+    />
+  </div>
+  <template v-else />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardMessagePreviewWithMeta.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  contact: {
+    type: Object,
+    required: true,
+  },
 });
 
 const { t } = useI18n();
@@ -49,7 +53,9 @@ const unreadMessagesCount = computed(() => {
 
 const hasSlaThreshold = computed(() => {
   return (
-    slaCardLabelRef.value?.hasSlaThreshold && props.conversation?.slaPolicyId
+    !props.contact?.blocked &&
+    slaCardLabelRef.value?.hasSlaThreshold &&
+    props.conversation?.appliedSla?.id
   );
 });
 

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardPriorityIcon.vue

@@ -1,207 +1,63 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { CONVERSATION_PRIORITY } from 'shared/constants/messages';
 
-defineProps({
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
   priority: {
     type: String,
     default: '',
   },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+const { t } = useI18n();
+
+const icons = {
+  [CONVERSATION_PRIORITY.URGENT]: 'i-woot-priority-urgent',
+  [CONVERSATION_PRIORITY.HIGH]: 'i-woot-priority-high',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'i-woot-priority-medium',
+  [CONVERSATION_PRIORITY.LOW]: 'i-woot-priority-low',
+};
+
+const priorityLabels = {
+  [CONVERSATION_PRIORITY.URGENT]: 'CONVERSATION.PRIORITY.OPTIONS.URGENT',
+  [CONVERSATION_PRIORITY.HIGH]: 'CONVERSATION.PRIORITY.OPTIONS.HIGH',
+  [CONVERSATION_PRIORITY.MEDIUM]: 'CONVERSATION.PRIORITY.OPTIONS.MEDIUM',
+  [CONVERSATION_PRIORITY.LOW]: 'CONVERSATION.PRIORITY.OPTIONS.LOW',
+};
+
+const iconName = computed(() => {
+  if (props.priority && icons[props.priority]) {
+    return icons[props.priority];
+  }
+  return props.showEmpty ? 'i-woot-priority-empty' : '';
+});
+
+const tooltipContent = computed(() => {
+  if (props.priority && priorityLabels[props.priority]) {
+    return t(priorityLabels[props.priority]);
+  }
+
+  if (props.showEmpty) {
+    return t('CONVERSATION.PRIORITY.OPTIONS.NONE');
+  }
+
+  return '';
 });
 </script>
 
-<!-- eslint-disable vue/no-static-inline-styles -->
 <template>
-  <div class="inline-flex items-center justify-center rounded-md">
-    <!-- Low Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.LOW"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- Medium Priority  -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.MEDIUM"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-slate-6"
-        />
-      </g>
-    </svg>
-
-    <!-- High Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.HIGH"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-amber-9"
-        />
-      </g>
-    </svg>
-
-    <!-- Urgent Priority -->
-    <svg
-      v-if="priority === CONVERSATION_PRIORITY.URGENT"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <mask
-        id="mask0_2030_12879"
-        style="mask-type: alpha"
-        maskUnits="userSpaceOnUse"
-        x="0"
-        y="0"
-        width="20"
-        height="20"
-      >
-        <rect width="20" height="20" fill="#D9D9D9" />
-      </mask>
-      <g mask="url(#mask0_2030_12879)">
-        <rect
-          x="3.33301"
-          y="10"
-          width="3.33333"
-          height="6.66667"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="8.33301"
-          y="6.6665"
-          width="3.33333"
-          height="10"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-        <rect
-          x="13.333"
-          y="3.3335"
-          width="3.33333"
-          height="13.3333"
-          rx="1.66667"
-          class="fill-n-ruby-9"
-        />
-      </g>
-    </svg>
-  </div>
+  <Icon
+    v-tooltip.top="{
+      content: tooltipContent,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 text-n-slate-5"
+  />
 </template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/CardStatusIcon.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { computed } from 'vue';
+import { CONVERSATION_STATUS } from 'shared/constants/messages';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: {
+    type: String,
+    default: '',
+  },
+  showEmpty: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const icons = {
+  [CONVERSATION_STATUS.OPEN]: 'i-woot-status-open',
+  [CONVERSATION_STATUS.RESOLVED]: 'i-woot-status-resolved',
+  [CONVERSATION_STATUS.PENDING]: 'i-woot-status-pending',
+  [CONVERSATION_STATUS.SNOOZED]: 'i-woot-status-snoozed',
+};
+
+const iconName = computed(() => {
+  if (props.status && icons[props.status]) {
+    return icons[props.status];
+  }
+  return props.showEmpty ? 'i-woot-status-empty' : '';
+});
+</script>
+
+<template>
+  <Icon
+    v-tooltip.top="{
+      content: status,
+      delay: { show: 500, hide: 0 },
+    }"
+    :icon="iconName"
+    class="size-4 flex-shrink-0"
+  />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue

@@ -126,6 +126,7 @@ const onCardClick = e => {
         v-show="!showMessagePreviewWithoutMeta"
         ref="cardMessagePreviewWithMetaRef"
         :conversation="conversation"
+        :contact="contact"
         :account-labels="accountLabels"
       />
     </div>

app/javascript/dashboard/components-next/Conversation/ConversationCard/ConversationCardExpanded.vue

@@ -0,0 +1,194 @@
+<script setup>
+import { computed, useTemplateRef } from 'vue';
+import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import CardAvatar from './CardAvatar.vue';
+import CardContent from './CardContent.vue';
+import CardLabels from './CardLabelsV5.vue';
+import CardPriorityIcon from './CardPriorityIcon.vue';
+import InboxName from 'dashboard/components-next/Conversation/InboxName.vue';
+import Avatar from 'next/avatar/Avatar.vue';
+import TimeAgo from 'dashboard/components/ui/TimeAgo.vue';
+import SLACardLabel from 'dashboard/components-next/Conversation/Sla/SLACardLabel.vue';
+import CardStatusIcon from './CardStatusIcon.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  chat: { type: Object, required: true },
+  currentContact: { type: Object, required: true },
+  assignee: { type: Object, default: () => ({}) },
+  inbox: { type: Object, default: () => ({}) },
+  selected: { type: Boolean, default: false },
+  isActiveChat: { type: Boolean, default: false },
+  showAssignee: { type: Boolean, default: false },
+  showInboxName: { type: Boolean, default: false },
+  isInboxView: { type: Boolean, default: false },
+});
+
+const emit = defineEmits([
+  'selectConversation',
+  'deSelectConversation',
+  'click',
+  'contextmenu',
+]);
+
+const lastMessageInChat = computed(() => getLastMessage(props.chat));
+const showLabelsSection = computed(() => props.chat.labels?.length > 0);
+
+const voiceCallData = computed(() => {
+  const last = lastMessageInChat.value;
+  if (last?.content_type !== 'voice_call' || !last.call) {
+    return { status: null, direction: null };
+  }
+  return {
+    status: last.call.status,
+    direction: last.call.direction === 'outgoing' ? 'outbound' : 'inbound',
+  };
+});
+
+const unreadCount = computed(() => props.chat.unread_count);
+
+const slaCardLabel = useTemplateRef('slaCardLabel');
+
+const hasSlaPolicyId = computed(
+  () =>
+    !props.currentContact?.blocked &&
+    (props.chat?.applied_sla?.id || slaCardLabel.value?.hasSlaThreshold)
+);
+
+const selectedModel = computed({
+  get: () => props.selected,
+  set: value => {
+    if (value) {
+      emit('selectConversation', value);
+    } else {
+      emit('deSelectConversation', value);
+    }
+  },
+});
+</script>
+
+<template>
+  <div
+    class="conversation relative cursor-pointer group grid gap-4 items-center px-3 h-12 border-b border-n-slate-3 hover:border-n-surface-1 hover:z-[1] before:content-[none] before:absolute before:-top-px before:inset-x-0 before:h-px before:bg-n-surface-1 before:pointer-events-none hover:before:content-['']"
+    :class="{
+      'active animate-card-select bg-n-alpha-1 dark:bg-n-alpha-3 !border-n-surface-1':
+        isActiveChat,
+      'selected bg-n-slate-2 dark:bg-n-slate-3 !border-n-surface-1': selected,
+      'hover:bg-n-alpha-1': !isActiveChat && !selected,
+      'grid-cols-[minmax(0,2fr)_minmax(0,1fr)]': showLabelsSection,
+      'grid-cols-[minmax(0,2fr)_max-content]': !showLabelsSection,
+    }"
+    @click="$emit('click', $event)"
+    @contextmenu="$emit('contextmenu', $event)"
+  >
+    <!-- LEFT SECTION -->
+    <div class="flex items-center gap-2 min-w-0 flex-1">
+      <div class="flex items-center justify-center flex-shrink-0" @click.stop>
+        <Checkbox v-model="selectedModel" />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardPriorityIcon :priority="chat.priority" show-empty />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <Avatar
+          v-if="showAssignee && assignee.name"
+          v-tooltip.top="{
+            content: assignee.name,
+            delay: { show: 500, hide: 0 },
+          }"
+          :name="assignee.name"
+          :src="assignee.thumbnail"
+          :size="14"
+          :status="assignee.availability_status"
+          hide-offline-status
+        />
+        <Icon
+          v-else
+          icon="i-woot-empty-assignee"
+          class="size-4 text-n-slate-7"
+        />
+      </div>
+
+      <div class="w-4 flex items-center justify-center flex-shrink-0">
+        <CardStatusIcon :status="chat.status" show-empty />
+      </div>
+
+      <div class="w-px h-3 bg-n-slate-6 flex-shrink-0" />
+
+      <div v-if="!isInboxView && showInboxName" class="w-20 flex-shrink-0">
+        <InboxName v-if="showInboxName" :inbox="inbox" class="min-w-0" />
+      </div>
+
+      <div
+        v-if="!isInboxView && showInboxName"
+        class="w-px h-3 bg-n-slate-6 flex-shrink-0"
+      />
+
+      <div
+        v-tooltip.top="{
+          content: chat.id,
+          delay: { show: 500, hide: 0 },
+        }"
+        class="h-6 flex items-center gap-1 max-w-20 w-full min-w-0 flex-shrink-0"
+      >
+        <Icon
+          icon="i-woot-hash"
+          class="size-3.5 text-n-slate-10 flex-shrink-0"
+        />
+        <span class="text-body-main text-n-slate-11 truncate">
+          {{ chat.id }}
+        </span>
+      </div>
+
+      <CardAvatar
+        :contact="currentContact"
+        :selected="false"
+        :enable-selection="false"
+        :hide-thumbnail="false"
+      />
+
+      <h4
+        class="text-heading-3 my-0 capitalize truncate text-n-slate-12 font-medium w-32 flex-shrink-0"
+      >
+        {{ currentContact.name }}
+      </h4>
+
+      <CardContent
+        :last-message="lastMessageInChat"
+        :voice-call-status="voiceCallData.status"
+        :voice-call-direction="voiceCallData.direction"
+        :unread-count="unreadCount"
+        :show-expanded-preview="false"
+      />
+    </div>
+
+    <!-- RIGHT SECTION -->
+    <div class="flex items-center justify-end gap-1.5 flex-shrink-0">
+      <div v-if="showLabelsSection" class="min-w-0 w-full">
+        <CardLabels
+          :labels="chat.labels"
+          disable-toggle
+          class="my-0 [&>div]:justify-end justify-end"
+        />
+      </div>
+
+      <div v-if="hasSlaPolicyId" class="flex-shrink-0">
+        <SLACardLabel ref="slaCardLabel" :chat="chat" />
+      </div>
+
+      <div class="flex-shrink-0 w-[4.375rem] text-end">
+        <TimeAgo
+          :conversation-id="chat.id"
+          :last-activity-timestamp="chat.timestamp"
+          :created-at-timestamp="chat.created_at"
+          class="font-440 !text-xs text-n-slate-11"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/MessagePreview.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { computed } from 'vue';
+import { MESSAGE_TYPE } from 'widget/helpers/constants';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true,
+  },
+  showMessageType: {
+    type: Boolean,
+    default: true,
+  },
+  defaultEmptyMessage: {
+    type: String,
+    default: '',
+  },
+  multiLine: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { getPlainText } = useMessageFormatter();
+
+const attachmentIcons = {
+  image: 'i-lucide-image',
+  audio: 'i-lucide-headphones',
+  video: 'i-lucide-video',
+  file: 'i-lucide-file',
+  location: 'i-lucide-map-pin',
+  fallback: 'i-lucide-link-2',
+};
+
+const messageByAgent = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.OUTGOING;
+});
+
+const isMessageAnActivity = computed(() => {
+  const { message_type: messageType } = props.message;
+  return messageType === MESSAGE_TYPE.ACTIVITY;
+});
+
+const isMessagePrivate = computed(() => {
+  const { private: isPrivate } = props.message;
+  return isPrivate;
+});
+
+const parsedLastMessage = computed(() => {
+  const { content_attributes: contentAttributes } = props.message;
+  const { email: { subject } = {} } = contentAttributes || {};
+  return getPlainText(subject || props.message.content);
+});
+
+const lastMessageFileType = computed(() => {
+  const [{ file_type: fileType } = {}] = props.message.attachments;
+  return fileType;
+});
+
+const attachmentIcon = computed(() => {
+  return attachmentIcons[lastMessageFileType.value];
+});
+
+const attachmentMessageContent = computed(() => {
+  return `CHAT_LIST.ATTACHMENTS.${lastMessageFileType.value}.CONTENT`;
+});
+
+const isMessageSticker = computed(() => {
+  return props.message && props.message.content_type === 'sticker';
+});
+</script>
+
+<template>
+  <div
+    class="min-w-0 text-sm"
+    :class="
+      multiLine
+        ? 'flex items-start gap-1'
+        : 'grid grid-cols-[auto_1fr] items-center gap-1'
+    "
+  >
+    <template v-if="showMessageType && !multiLine">
+      <Icon
+        v-if="isMessagePrivate"
+        icon="i-lucide-lock-keyhole"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="messageByAgent"
+        icon="i-lucide-undo-2"
+        class="size-3.5"
+      />
+      <Icon
+        v-else-if="isMessageAnActivity"
+        icon="i-lucide-info"
+        class="size-3.5"
+      />
+    </template>
+
+    <span
+      class="min-w-0 text-body-main"
+      :class="multiLine ? 'line-clamp-2' : 'truncate'"
+    >
+      <!-- Case for previous and conversation conversation card -->
+      <template v-if="showMessageType && multiLine">
+        <Icon
+          v-if="isMessagePrivate"
+          icon="i-lucide-lock-keyhole"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="messageByAgent"
+          icon="i-lucide-undo-2"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <Icon
+          v-else-if="isMessageAnActivity"
+          icon="i-lucide-info"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+      </template>
+      <span
+        v-if="message.content && isMessageSticker"
+        class="inline-grid grid-flow-col auto-cols-max items-center gap-1"
+      >
+        <Icon icon="i-lucide-image" class="size-3.5" />
+        {{ $t('CHAT_LIST.ATTACHMENTS.image.CONTENT') }}
+      </span>
+
+      <template v-else-if="message.content">
+        {{ parsedLastMessage }}
+      </template>
+
+      <span
+        v-else-if="message.attachments"
+        class="inline-block align-middle truncate"
+      >
+        <Icon
+          v-if="attachmentIcon && showMessageType"
+          :icon="attachmentIcon"
+          class="inline-block align-middle size-3.5 ltr:mr-1 rtl:ml-1"
+        />
+        <span class="inline-block align-middle">
+          {{ $t(attachmentMessageContent) }}
+        </span>
+      </span>
+
+      <template v-else>
+        {{ defaultEmptyMessage || $t('CHAT_LIST.NO_CONTENT') }}
+      </template>
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/SLACardLabel.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
-import { evaluateSLAStatus } from '@chatwoot/utils';
+import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
 
 const props = defineProps({
   conversation: {
@@ -19,16 +19,8 @@ const slaStatus = ref({
   icon: null,
 });
 
-// TODO: Remove this once we update the helper from utils
-// https://github.com/chatwoot/utils/blob/main/src/sla.ts#L73
-const convertObjectCamelCaseToSnakeCase = object => {
-  return Object.keys(object).reduce((acc, key) => {
-    acc[key.replace(/([A-Z])/g, '_$1').toLowerCase()] = object[key];
-    return acc;
-  }, {});
-};
-
 const appliedSLA = computed(() => props.conversation?.appliedSla);
+const slaEvents = computed(() => props.conversation?.slaEvents);
 const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
 
 const hasSlaThreshold = computed(() => {
@@ -41,8 +33,9 @@ const slaStatusText = computed(() => {
 
 const updateSlaStatus = () => {
   slaStatus.value = evaluateSLAStatus({
-    appliedSla: convertObjectCamelCaseToSnakeCase(appliedSLA.value || {}),
+    appliedSla: appliedSLA.value || {},
     chat: props.conversation,
+    slaEvents: slaEvents.value || [],
   });
 };
 

app/javascript/dashboard/components-next/Conversation/ConversationCard/UnreadBadge.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+  count: { type: Number, required: true },
+  alignBottom: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+
+const displayCount = computed(() =>
+  props.count > 9 ? t('CHAT_LIST.UNREAD_COUNT_OVERFLOW') : props.count
+);
+</script>
+
+<template>
+  <span
+    v-if="count > 0"
+    class="bg-n-teal-9 rounded-full h-4 min-w-4 max-w-5 px-1 w-fit font-medium text-xxs leading-3 text-white inline-grid place-items-center flex-shrink-0"
+    :class="{
+      'mb-0.5': alignBottom,
+    }"
+  >
+    {{ displayCount }}
+  </span>
+  <span v-else />
+</template>

app/javascript/dashboard/components-next/Conversation/ConversationCard/VoiceCallStatus.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from 'vue';
+import {
+  VOICE_CALL_STATUS,
+  VOICE_CALL_DIRECTION,
+} from 'dashboard/components-next/message/constants';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  status: { type: String, default: '' },
+  direction: { type: String, default: '' },
+});
+
+const LABEL_KEYS = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'CONVERSATION.VOICE_CALL.CALL_IN_PROGRESS',
+  [VOICE_CALL_STATUS.COMPLETED]: 'CONVERSATION.VOICE_CALL.CALL_ENDED',
+};
+
+const ICON_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'i-ph-phone-call',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.FAILED]: 'i-ph-phone-x',
+  [VOICE_CALL_STATUS.REJECTED]: 'i-ph-phone-x',
+};
+
+const COLOR_MAP = {
+  [VOICE_CALL_STATUS.IN_PROGRESS]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.RINGING]: 'text-n-teal-9',
+  [VOICE_CALL_STATUS.COMPLETED]: 'text-n-slate-11',
+  [VOICE_CALL_STATUS.NO_ANSWER]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.FAILED]: 'text-n-ruby-9',
+  [VOICE_CALL_STATUS.REJECTED]: 'text-n-ruby-9',
+};
+
+const isOutbound = computed(
+  () => props.direction === VOICE_CALL_DIRECTION.OUTBOUND
+);
+const isFailed = computed(() =>
+  [
+    VOICE_CALL_STATUS.NO_ANSWER,
+    VOICE_CALL_STATUS.FAILED,
+    VOICE_CALL_STATUS.REJECTED,
+  ].includes(props.status)
+);
+
+const labelKey = computed(() => {
+  if (LABEL_KEYS[props.status]) return LABEL_KEYS[props.status];
+  if (props.status === VOICE_CALL_STATUS.RINGING) {
+    return isOutbound.value
+      ? 'CONVERSATION.VOICE_CALL.OUTGOING_CALL'
+      : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+  }
+  return isFailed.value
+    ? 'CONVERSATION.VOICE_CALL.MISSED_CALL'
+    : 'CONVERSATION.VOICE_CALL.INCOMING_CALL';
+});
+
+const iconName = computed(() => {
+  if (ICON_MAP[props.status]) return ICON_MAP[props.status];
+  return isOutbound.value ? 'i-ph-phone-outgoing' : 'i-ph-phone-incoming';
+});
+
+const statusColor = computed(
+  () => COLOR_MAP[props.status] || 'text-n-slate-11'
+);
+</script>
+
+<template>
+  <div class="grid grid-cols-[auto_1fr] items-center gap-1 min-w-0 text-sm">
+    <Icon class="size-3.5" :icon="iconName" :class="statusColor" />
+    <span class="truncate text-body-main" :class="statusColor">
+      {{ $t(labelKey) }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/InboxName.vue

@@ -0,0 +1,19 @@
+<script setup>
+import ChannelIcon from 'dashboard/components-next/icon/ChannelIcon.vue';
+
+defineProps({
+  inbox: {
+    type: Object,
+    default: () => {},
+  },
+});
+</script>
+
+<template>
+  <div :title="inbox.name" class="flex items-center gap-0.5 min-w-0">
+    <ChannelIcon :inbox="inbox" class="size-4 flex-shrink-0 text-n-slate-11" />
+    <span class="truncate text-body-main text-n-slate-11">
+      {{ inbox.name }}
+    </span>
+  </div>
+</template>

app/javascript/dashboard/components-next/Conversation/SidepanelSwitch.vue

@@ -57,7 +57,7 @@ useKeyboardEvents(keyboardEvents);
 
 <template>
   <ButtonGroup
-    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow"
+    class="flex flex-col justify-center items-center absolute top-36 xl:top-24 ltr:right-2 rtl:left-2 bg-n-solid-2/90 backdrop-blur-lg border border-n-weak/50 rounded-full gap-1.5 p-1.5 shadow-sm transition-shadow duration-200 hover:shadow !z-20"
   >
     <Button
       v-tooltip.top="$t('CONVERSATION.SIDEBAR.CONTACT')"

app/javascript/dashboard/components-next/Conversation/Sla/SLACardLabel.vue

@@ -0,0 +1,84 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { evaluateSLAStatus } from 'dashboard/helper/slaHelper';
+
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Label from 'dashboard/components-next/label/Label.vue';
+
+const props = defineProps({
+  chat: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const REFRESH_INTERVAL = 60000;
+
+const timer = ref(null);
+const slaStatus = ref({
+  threshold: null,
+  isSlaMissed: false,
+  type: null,
+  icon: null,
+});
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const appliedSLA = computed(() => props.chat?.applied_sla);
+const slaEvents = computed(() => props.chat?.sla_events);
+const hasSlaThreshold = computed(() => slaStatus.value?.threshold);
+const isSlaMissed = computed(() => slaStatus.value?.isSlaMissed);
+
+const updateSlaStatus = () => {
+  slaStatus.value = evaluateSLAStatus({
+    appliedSla: appliedSLA.value || {},
+    chat: props.chat,
+    slaEvents: slaEvents.value || [],
+  });
+};
+
+const createTimer = () => {
+  timer.value = setTimeout(() => {
+    updateSlaStatus();
+    createTimer();
+  }, REFRESH_INTERVAL);
+};
+
+onMounted(() => {
+  updateSlaStatus();
+  createTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+
+watch(() => props.chat, updateSlaStatus);
+
+defineExpose({
+  hasSlaThreshold,
+});
+</script>
+
+<template>
+  <div
+    v-if="hasSlaThreshold"
+    v-bind="$attrs"
+    class="relative flex items-center cursor-pointer min-w-fit group"
+  >
+    <Label
+      :label="slaStatus.threshold"
+      :color="isSlaMissed ? 'ruby' : 'amber'"
+      compact
+    >
+      <template #icon>
+        <Icon icon="i-lucide-flame" class="flex-shrink-0 size-3.5" />
+      </template>
+    </Label>
+  </div>
+  <template v-else />
+</template>

app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue

@@ -134,7 +134,7 @@ const handleInputUpdate = async () => {
         :message-type="hasError ? 'error' : 'info'"
         autofocus
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"

app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue

@@ -49,7 +49,11 @@ const rules = computed(() => ({
       props.attribute.regexPattern && {
         regexValidation: value => {
           if (!value) return true;
-          return getRegexp(props.attribute.regexPattern).test(value);
+          try {
+            return getRegexp(props.attribute.regexPattern).test(value);
+          } catch {
+            return false;
+          }
         },
       }),
   },
@@ -187,7 +191,7 @@ const handleInputUpdate = async () => {
         :message="attributeErrorMessage"
         :message-type="hasError ? 'error' : 'info'"
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"

app/javascript/dashboard/components-next/DraggableReorderList/DraggableReorderList.vue

@@ -0,0 +1,378 @@
+<script setup>
+import { computed, ref, watch, nextTick, onBeforeUnmount } from 'vue';
+import { useEventListener, onKeyStroke, useRafFn } from '@vueuse/core';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+// Reorderable list with cross-page drag. It must stay mounted during a page
+// fetch — hide the list spinner while `dragging`, or the held item is lost.
+const props = defineProps({
+  items: { type: Array, required: true },
+  itemKey: { type: String, default: 'id' },
+  disabled: { type: Boolean, default: false },
+  currentPage: { type: Number, default: 1 },
+  totalPages: { type: Number, default: 1 },
+});
+const emit = defineEmits(['reorder', 'navigatePage', 'dragging']);
+
+const DRAG_THRESHOLD = 5;
+const EDGE_BAND = 72; // px from a side that arms a page turn
+const AUTO_PAGE_DELAY = 600; // ms hovering an edge before it flips
+const SCROLL_BAND = 60; // px from top/bottom that autoscrolls the list
+const SCROLL_STEP = 10; // px scrolled per frame while parked at an edge
+const PILL = 36; // px, the page-turn arrow button on each edge
+
+const root = ref(null);
+const isDragging = ref(false);
+const dragged = ref(null);
+const pointer = ref({ x: 0, y: 0 });
+const insertBefore = ref(null); // key the gap sits before, null = end of list
+const activeEdge = ref(null);
+const bounds = ref({ left: 0, right: 0, top: 0, bottom: 0 }); // visible list rect
+const grab = ref({ dx: 0, dy: 0 }); // cursor offset inside the grabbed card
+const dragHeight = ref(0);
+
+let press = null; // pending press, before it becomes a drag
+let dwell = null; // timer that flips the page after hovering an edge
+let paging = false; // waiting for a flipped page to load
+let scroller = null; // scrollable ancestor, found when a drag begins
+let scrollDir = 0; // -1 up, +1 down, 0 idle
+let sourcePage = 1; // page the drag started on, to resolve cross-page end-drops
+
+const keyOf = item => String(item?.[props.itemKey]);
+const others = item => props.items.filter(o => keyOf(o) !== keyOf(item));
+const isRTL = () =>
+  document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl';
+const canPage = dir =>
+  dir === 'next' ? props.currentPage < props.totalPages : props.currentPage > 1;
+
+// Key of the item after `key` in `list`, or null when it is the last one.
+const keyAfter = (list, key) => {
+  const next = list[list.findIndex(o => keyOf(o) === key) + 1];
+  return next ? keyOf(next) : null;
+};
+
+const edges = computed(() =>
+  ['prev', 'next'].filter(canPage).map(dir => {
+    const onLeft = isRTL() ? dir === 'next' : dir === 'prev';
+    return {
+      dir,
+      onLeft,
+      icon: onLeft ? 'i-lucide-chevrons-left' : 'i-lucide-chevrons-right',
+    };
+  })
+);
+
+// Cursor overlay: an edge glow band, a page-turn arrow per edge, and a ghost of
+// the dragged row that follows the cursor and shrinks when aimed at an edge.
+const EDGE_BAND_W = 80; // px width of the glow band on each pageable edge
+const bandStyle = onLeft => {
+  const x = onLeft ? bounds.value.left : bounds.value.right - EDGE_BAND_W;
+  return {
+    width: `${EDGE_BAND_W}px`,
+    height: `${bounds.value.bottom - bounds.value.top}px`,
+    transform: `translate(${x}px, ${bounds.value.top}px)`,
+  };
+};
+const pillStyle = onLeft => {
+  const x = onLeft ? bounds.value.left + 12 : bounds.value.right - PILL - 12;
+  return { transform: `translate(${x}px, ${pointer.value.y - PILL / 2}px)` };
+};
+const ghostStyle = computed(() => ({
+  width: `${bounds.value.right - bounds.value.left}px`,
+  transform: `translate(${pointer.value.x - grab.value.dx}px, ${pointer.value.y - grab.value.dy}px)`,
+}));
+const scaleStyle = computed(() => ({
+  transformOrigin: `${grab.value.dx}px ${grab.value.dy}px`,
+}));
+
+// The list as shown mid-drag: the dragged row slotted into the gap at `insertBefore`.
+const displayItems = computed(() => {
+  if (!isDragging.value || !dragged.value) return props.items;
+  const rest = others(dragged.value);
+  const at = rest.findIndex(o => keyOf(o) === insertBefore.value);
+  rest.splice(at === -1 ? rest.length : at, 0, dragged.value);
+  return rest;
+});
+
+// Move the gap when the cursor crosses the midpoint of the card it is over.
+const aim = () => {
+  const card = document
+    .elementFromPoint(pointer.value.x, pointer.value.y)
+    ?.closest('[data-drag-id]');
+  const key = card?.dataset.dragId;
+  if (!key || key === keyOf(dragged.value)) return;
+
+  const { top, height } = card.getBoundingClientRect();
+  const above = pointer.value.y < top + height / 2;
+  insertBefore.value = above ? key : keyAfter(others(dragged.value), key);
+};
+
+const flip = dir => {
+  if (paging || !isDragging.value) return;
+  paging = true;
+  emit('navigatePage', props.currentPage + (dir === 'next' ? 1 : -1));
+};
+
+const aimEdge = x => {
+  const rect = root.value?.getBoundingClientRect();
+  if (!rect) return;
+  // Clip the list rect to the scroll viewport so the glow band and its top/bottom
+  // fade always sit on the visible edges, not the far ends of the full content.
+  const view = scroller?.getBoundingClientRect();
+  const viewTop = Math.max(view?.top ?? 0, 0);
+  const viewBottom = Math.min(
+    view?.bottom ?? window.innerHeight,
+    window.innerHeight
+  );
+  bounds.value = {
+    left: rect.left,
+    right: rect.right,
+    top: Math.max(rect.top, viewTop),
+    bottom: Math.min(rect.bottom, viewBottom),
+  };
+
+  let dir = null;
+  if (x <= rect.left + EDGE_BAND) dir = isRTL() ? 'next' : 'prev';
+  else if (x >= rect.right - EDGE_BAND) dir = isRTL() ? 'prev' : 'next';
+  if (dir && !canPage(dir)) dir = null;
+  if (dir === activeEdge.value) return;
+
+  activeEdge.value = dir;
+  clearTimeout(dwell);
+  if (dir) dwell = setTimeout(() => flip(dir), AUTO_PAGE_DELAY);
+};
+
+// Nearest scrollable ancestor, so a drag can reach rows that are off-screen.
+const scrollParent = () => {
+  let el = root.value?.parentElement;
+  while (el) {
+    const { overflowY } = getComputedStyle(el);
+    if (overflowY === 'auto' || overflowY === 'scroll') return el;
+    el = el.parentElement;
+  }
+  return null;
+};
+
+// While parked at the top/bottom edge, keep scrolling and re-aim as rows slide by.
+const { pause: pauseScroll, resume: resumeScroll } = useRafFn(
+  () => {
+    if (!scroller || !scrollDir) return;
+    scroller.scrollTop += scrollDir * SCROLL_STEP;
+    aim();
+    aimEdge(pointer.value.x);
+  },
+  { immediate: false }
+);
+
+const updateAutoScroll = y => {
+  if (!scroller) return;
+  const rect = scroller.getBoundingClientRect();
+  const atTop = scroller.scrollTop <= 0;
+  const atBottom =
+    scroller.scrollTop >= scroller.scrollHeight - scroller.clientHeight;
+  if (y < rect.top + SCROLL_BAND && !atTop) scrollDir = -1;
+  else if (y > rect.bottom - SCROLL_BAND && !atBottom) scrollDir = 1;
+  else scrollDir = 0;
+  if (scrollDir) resumeScroll();
+  else pauseScroll();
+};
+
+const reset = () => {
+  isDragging.value = false;
+  dragged.value = null;
+  insertBefore.value = null;
+  activeEdge.value = null;
+  clearTimeout(dwell);
+  paging = false;
+  scrollDir = 0;
+  scroller = null;
+  pauseScroll();
+  document.body.classList.remove('select-none');
+  emit('dragging', false);
+};
+
+// Positions sit on a gap-of-10 grid; a midpoint (±5 at the ends) slots between two rows.
+// Cross-page end-drops are the tricky case: moving an item off its source page pulls the
+// target page's boundary row into the vacated slot. So at the leading edge after moving
+// DOWN (or the trailing edge after moving UP) we land between the two boundary rows, or
+// the item sorts onto the adjacent page and vanishes from view.
+const drop = (item, rawBefore) => {
+  const pos = o => o?.position || 0;
+  const mid = (a, b) => Math.floor((pos(a) + pos(b)) / 2);
+  const rest = others(item);
+  // No other rows to position against — e.g. the lone article on a page dropped
+  // without crossing to another page. Leave the order untouched.
+  if (!rest.length) return;
+  // A page flip can leave the aimed key pointing at a row that is no longer on
+  // this page. Like displayItems, resolve an unknown key to null (end of list),
+  // so what the user sees and what we save agree.
+  const before = rest.some(o => keyOf(o) === rawBefore) ? rawBefore : null;
+  const movedDown = props.currentPage > sourcePage;
+  const movedUp = props.currentPage < sourcePage;
+
+  let position;
+  if (before === null) {
+    position =
+      movedUp && rest.length >= 2
+        ? mid(rest.at(-2), rest.at(-1))
+        : pos(rest.at(-1)) + 5;
+  } else {
+    const i = rest.findIndex(o => keyOf(o) === before);
+    if (i > 0) {
+      position = mid(rest[i - 1], rest[i]);
+    } else if (movedDown) {
+      // Top-of-page after moving down: the old first row slid up into the source
+      // page's gap, so land just after it to stay this page's first.
+      position = rest.length >= 2 ? mid(rest[0], rest[1]) : pos(rest[0]) + 5;
+    } else {
+      position = pos(rest[0]) - 5;
+    }
+  }
+  emit('reorder', { [item[props.itemKey]]: position });
+};
+
+const startDrag = () => {
+  isDragging.value = true;
+  dragged.value = press.item;
+  grab.value = { dx: press.dx, dy: press.dy };
+  dragHeight.value = press.h;
+  insertBefore.value = keyAfter(props.items, keyOf(press.item));
+  sourcePage = props.currentPage;
+  scroller = scrollParent();
+  document.body.classList.add('select-none');
+  emit('dragging', true);
+};
+
+const onPointerDown = (item, e) => {
+  if (e.button !== 0 || props.disabled) return;
+  if (e.target.closest('button, a, input, [role="button"]')) return;
+  const rect = e.currentTarget.getBoundingClientRect();
+  press = {
+    item,
+    x: e.clientX,
+    y: e.clientY,
+    dx: e.clientX - rect.left,
+    dy: e.clientY - rect.top,
+    h: rect.height,
+  };
+};
+
+useEventListener(window, 'pointermove', e => {
+  if (!press) return;
+  if (!isDragging.value) {
+    const moved = Math.hypot(e.clientX - press.x, e.clientY - press.y);
+    if (moved < DRAG_THRESHOLD) return;
+    startDrag();
+  }
+  e.preventDefault();
+  pointer.value = { x: e.clientX, y: e.clientY };
+  aim();
+  aimEdge(e.clientX);
+  updateAutoScroll(e.clientY);
+});
+
+useEventListener(window, 'pointerup', () => {
+  if (!press) return;
+  press = null;
+  if (!isDragging.value) return; // a press without movement is a click
+  const item = dragged.value;
+  const before = insertBefore.value;
+  const flipping = paging;
+  reset();
+  if (!flipping) drop(item, before);
+});
+
+// When the flipped page loads, re-aim under the held cursor so a parked edge keeps flipping.
+watch(
+  () => props.items,
+  () => {
+    if (!isDragging.value || !paging) return;
+    paging = false;
+    nextTick(() => {
+      if (!isDragging.value) return;
+      aim();
+      activeEdge.value = null;
+      aimEdge(pointer.value.x);
+    });
+  }
+);
+
+onKeyStroke('Escape', () => {
+  if (!isDragging.value) return;
+  press = null;
+  reset();
+});
+
+onBeforeUnmount(() => {
+  clearTimeout(dwell);
+  document.body.classList.remove('select-none');
+});
+</script>
+
+<template>
+  <div ref="root" class="relative w-full h-full">
+    <ul class="w-full h-full space-y-4">
+      <li
+        v-for="(item, index) in displayItems"
+        :key="keyOf(item)"
+        :data-drag-id="keyOf(item)"
+        class="relative list-none"
+        :class="{ 'cursor-grab': !disabled && !isDragging }"
+        @pointerdown="onPointerDown(item, $event)"
+        @dragstart.prevent
+      >
+        <div
+          v-if="isDragging && keyOf(item) === keyOf(dragged)"
+          :style="{ height: `${dragHeight}px` }"
+          class="border-2 border-dashed rounded-2xl border-n-brand/50 bg-n-brand/5"
+        />
+        <slot v-else name="item" :item="item" :index="index" />
+      </li>
+    </ul>
+
+    <Teleport v-if="isDragging" to="body">
+      <div
+        v-for="edge in edges"
+        :key="`band-${edge.dir}`"
+        :style="bandStyle(edge.onLeft)"
+        class="fixed top-0 left-0 z-40 pointer-events-none from-n-brand/15 to-transparent transition-opacity duration-200 [mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)] [-webkit-mask-image:linear-gradient(to_bottom,transparent,#000_56px,#000_calc(100%_-_56px),transparent)]"
+        :class="[
+          edge.onLeft ? 'bg-gradient-to-r' : 'bg-gradient-to-l',
+          activeEdge === edge.dir ? 'opacity-100' : 'opacity-0',
+        ]"
+      />
+
+      <div
+        v-for="edge in edges"
+        :key="edge.dir"
+        :style="pillStyle(edge.onLeft)"
+        class="fixed top-0 left-0 z-50 flex items-center justify-center transition-all duration-150 border rounded-full pointer-events-none size-9 backdrop-blur-sm"
+        :class="
+          activeEdge === edge.dir
+            ? 'scale-110 border-n-brand bg-n-brand/20 text-n-brand shadow-md'
+            : 'opacity-70 border-n-weak/60 bg-n-solid-1/70 text-n-slate-10'
+        "
+      >
+        <Icon
+          :icon="edge.icon"
+          class="size-4"
+          :class="activeEdge === edge.dir && 'animate-pulse'"
+        />
+      </div>
+
+      <div
+        v-if="dragged"
+        :style="ghostStyle"
+        class="fixed top-0 left-0 z-50 pointer-events-none select-none"
+      >
+        <div
+          :style="scaleStyle"
+          class="transition-transform duration-150 shadow-2xl rounded-2xl"
+          :class="{ 'scale-50': activeEdge }"
+        >
+          <slot name="ghost" :item="dragged" />
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>

app/javascript/dashboard/components-next/DraggableReorderList/specs/DraggableReorderList.spec.js

@@ -0,0 +1,222 @@
+import { mount } from '@vue/test-utils';
+import { h, nextTick } from 'vue';
+import DraggableReorderList from '../DraggableReorderList.vue';
+
+// The component is pointer-driven, so we drive it through real pointer events on
+// window while mocking the layout APIs jsdom does not implement: elementFromPoint
+// (which card is under the cursor) and getBoundingClientRect (its geometry).
+const elementAtPoint = { current: null };
+
+const move = (clientX, clientY) =>
+  window.dispatchEvent(new MouseEvent('pointermove', { clientX, clientY }));
+const release = () => window.dispatchEvent(new MouseEvent('pointerup'));
+
+// Stack the rows 50px apart, each 40px tall, inside a 500px-wide list.
+const stubGeometry = wrapper => {
+  wrapper.element.getBoundingClientRect = () => ({
+    left: 0,
+    right: 500,
+    top: 0,
+    bottom: 600,
+  });
+  wrapper.findAll('[data-drag-id]').forEach((li, index) => {
+    const top = index * 50;
+    li.element.getBoundingClientRect = () => ({
+      top,
+      height: 40,
+      bottom: top + 40,
+    });
+  });
+};
+
+const mountList = (props = {}) =>
+  mount(DraggableReorderList, {
+    props: { items: [], ...props },
+    slots: {
+      item: scope => h('div', { class: 'card' }, scope.item.title),
+      ghost: scope => h('div', { class: 'ghost' }, scope.item.title),
+    },
+    global: { stubs: { Icon: true, teleport: true } },
+  });
+
+describe('DraggableReorderList', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    elementAtPoint.current = null;
+    document.elementFromPoint = vi.fn(() => elementAtPoint.current);
+  });
+
+  afterEach(() => {
+    wrapper?.unmount();
+    vi.useRealTimers();
+  });
+
+  const startDragging = async id => {
+    stubGeometry(wrapper);
+    wrapper.find(`[data-drag-id="${id}"]`).element.dispatchEvent(
+      new MouseEvent('pointerdown', {
+        button: 0,
+        clientX: 250,
+        clientY: 20,
+        bubbles: true,
+      })
+    );
+    await nextTick();
+  };
+
+  it('renders each item through the item slot', () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+    });
+
+    const cards = wrapper.findAll('.card');
+    expect(cards).toHaveLength(2);
+    expect(cards[0].text()).toBe('Alpha');
+    expect(wrapper.find('[data-drag-id="1"]').exists()).toBe(true);
+    expect(wrapper.find('[data-drag-id="2"]').exists()).toBe(true);
+  });
+
+  it('shows a grab affordance only when enabled', () => {
+    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }] });
+    expect(wrapper.find('[data-drag-id="1"]').classes()).toContain(
+      'cursor-grab'
+    );
+
+    wrapper.unmount();
+    wrapper = mountList({ items: [{ id: 1, title: 'Alpha' }], disabled: true });
+    expect(wrapper.find('[data-drag-id="1"]').classes()).not.toContain(
+      'cursor-grab'
+    );
+  });
+
+  it('does not start a drag when disabled', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+      disabled: true,
+    });
+    await startDragging(1);
+    move(250, 200);
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')).toBeUndefined();
+  });
+
+  it('emits dragging true then false across a drag', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha' },
+        { id: 2, title: 'Beta' },
+      ],
+    });
+    await startDragging(1);
+    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
+    move(250, 60);
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')[0]).toEqual([true]);
+
+    release();
+    await nextTick();
+    expect(wrapper.emitted('dragging')[1]).toEqual([false]);
+  });
+
+  it('emits the midpoint position when dropped between two rows', async () => {
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+        { id: 3, title: 'Gamma', position: 30 },
+      ],
+    });
+    await startDragging(1);
+
+    // Hover the lower half of Beta (top 50, height 40 → midpoint 70) so the gap
+    // sits before Gamma; dropping there lands halfway between Beta and Gamma.
+    elementAtPoint.current = wrapper.find('[data-drag-id="2"]').element;
+    move(250, 85);
+    await nextTick();
+    release();
+    await nextTick();
+
+    expect(wrapper.emitted('reorder')[0][0]).toEqual({ 1: 25 });
+  });
+
+  it('does not reorder when the only row on a page is dropped in place', async () => {
+    // P1: dragging the lone article on a later page and releasing without
+    // crossing to another page must be a no-op, not move it to the top.
+    wrapper = mountList({
+      items: [{ id: 5, title: 'Solo', position: 260 }],
+      currentPage: 2,
+      totalPages: 2,
+    });
+    await startDragging(5);
+    move(250, 300);
+    await nextTick();
+    release();
+    await nextTick();
+
+    expect(wrapper.emitted('dragging')).toEqual([[true], [false]]);
+    expect(wrapper.emitted('reorder')).toBeUndefined();
+  });
+
+  it('turns the page after dwelling on a pageable edge', async () => {
+    vi.useFakeTimers();
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+      ],
+      currentPage: 1,
+      totalPages: 2,
+    });
+    await startDragging(1);
+
+    // Drag to the right edge over blank space (no card) and hold.
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+
+    expect(wrapper.emitted('navigatePage')[0]).toEqual([2]);
+  });
+
+  it('can still turn pages after releasing during a pending flip', async () => {
+    // Releasing while a flip fetch is in flight must clear paging state, or every
+    // later drag would be stuck unable to navigate.
+    vi.useFakeTimers();
+    wrapper = mountList({
+      items: [
+        { id: 1, title: 'Alpha', position: 10 },
+        { id: 2, title: 'Beta', position: 20 },
+      ],
+      currentPage: 1,
+      totalPages: 2,
+    });
+
+    // First drag: park at the edge to start a flip, then release before the new
+    // page arrives (items never change here).
+    await startDragging(1);
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+    release();
+    await nextTick();
+
+    // Second drag must be able to flip again.
+    await startDragging(1);
+    elementAtPoint.current = null;
+    move(490, 20);
+    await nextTick();
+    vi.advanceTimersByTime(600);
+
+    expect(wrapper.emitted('navigatePage')).toEqual([[2], [2]]);
+  });
+});

app/javascript/dashboard/components-next/Editor/Editor.vue

@@ -142,29 +142,27 @@ watch(
 
 <style lang="scss" scoped>
 .editor-wrapper {
-  ::v-deep {
-    .ProseMirror-menubar-wrapper {
-      .ProseMirror.ProseMirror-woot-style {
-        p {
-          @apply first:mt-0 !important;
-        }
-
-        .empty-node {
-          @apply m-0 !important;
-
-          &::before {
-            @apply text-n-slate-11 dark:text-n-slate-11;
-          }
-        }
+  :deep(.ProseMirror-menubar-wrapper) {
+    .ProseMirror.ProseMirror-woot-style {
+      p {
+        @apply first:mt-0 !important;
       }
 
-      .ProseMirror-menubar {
-        width: fit-content !important;
-        position: relative !important;
-        top: unset !important;
-        @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+      .empty-node {
+        @apply m-0 !important;
+
+        &::before {
+          @apply text-n-slate-11 dark:text-n-slate-11;
+        }
       }
     }
+
+    .ProseMirror-menubar {
+      width: fit-content !important;
+      position: relative !important;
+      top: unset !important;
+      @apply ltr:left-[-0.188rem] rtl:right-[-0.188rem] !important;
+    }
   }
 }
 </style>

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

@@ -9,11 +9,16 @@ import {
   ARTICLE_STATUSES,
 } from 'dashboard/helper/portalHelper';
 
+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';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 
 const props = defineProps({
   id: {
@@ -44,14 +49,46 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  isSelected: {
+    type: Boolean,
+    default: false,
+  },
+  selectable: {
+    type: Boolean,
+    default: false,
+  },
+  showSelectionControl: {
+    type: Boolean,
+    default: false,
+  },
 });
 
-const emit = defineEmits(['openArticle', 'articleAction']);
+const emit = defineEmits([
+  'openArticle',
+  'articleAction',
+  'toggleSelect',
+  'hover',
+]);
 
 const { t } = useI18n();
 
 const [showActionsDropdown, toggleDropdown] = useToggle();
 
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+const { isEnterprise } = useConfig();
+
+const isTranslationAvailable = computed(
+  () =>
+    isEnterprise &&
+    isFeatureEnabledonAccount.value(
+      currentAccountId.value,
+      FEATURE_FLAGS.CAPTAIN_TASKS
+    )
+);
+
 const articleMenuItems = computed(() => {
   const commonItems = Object.entries(ARTICLE_MENU_ITEMS).reduce(
     (acc, [key, item]) => {
@@ -64,7 +101,9 @@ const articleMenuItems = computed(() => {
   const statusItems = (
     ARTICLE_MENU_OPTIONS[props.status] ||
     ARTICLE_MENU_OPTIONS[ARTICLE_STATUSES.PUBLISHED]
-  ).map(key => commonItems[key]);
+  )
+    .filter(key => key !== 'translate' || isTranslationAvailable.value)
+    .map(key => commonItems[key]);
 
   return [...statusItems, commonItems.delete];
 });
@@ -93,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'
@@ -123,14 +162,27 @@ const handleClick = id => {
 </script>
 
 <template>
-  <CardLayout>
+  <CardLayout
+    :selectable="selectable"
+    class="relative"
+    @mouseenter="emit('hover', true)"
+    @mouseleave="emit('hover', false)"
+  >
+    <div
+      v-show="showSelectionControl"
+      class="absolute top-7 ltr:left-3 rtl:right-3"
+    >
+      <Checkbox :model-value="isSelected" @change="emit('toggleSelect', id)" />
+    </div>
     <div class="flex justify-between w-full gap-1">
-      <span
-        class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
-        @click="handleClick(id)"
-      >
-        {{ title }}
-      </span>
+      <div class="flex items-center gap-2 min-w-0">
+        <span
+          class="text-base cursor-pointer hover:underline underline-offset-2 hover:text-n-blue-11 text-n-slate-12 line-clamp-1"
+          @click="handleClick(id)"
+        >
+          {{ title }}
+        </span>
+      </div>
       <div class="flex items-center gap-2">
         <span
           class="text-xs font-medium inline-flex items-center h-6 px-2 py-0.5 rounded-md bg-n-alpha-2"
@@ -158,9 +210,9 @@ const handleClick = id => {
         </div>
       </div>
     </div>
-    <div class="flex items-center justify-between w-full gap-4">
-      <div class="flex items-center gap-4">
-        <div class="flex items-center gap-1">
+    <div class="flex items-center justify-between w-full gap-2 sm:gap-4">
+      <div class="flex items-center min-w-0 gap-2 sm:gap-4">
+        <div class="flex items-center min-w-0 gap-1">
           <Avatar
             :name="authorName"
             :src="authorThumbnailSrc"
@@ -171,11 +223,17 @@ const handleClick = id => {
             {{ authorName || '-' }}
           </span>
         </div>
-        <span class="block text-sm whitespace-nowrap text-n-slate-11">
-          {{ categoryName }}
+        <span class="flex items-center min-w-0 gap-1 text-sm text-n-slate-11">
+          <EmojiIcon
+            v-if="category?.icon"
+            :value="category.icon"
+            :color="category.icon_color"
+            class="flex-shrink-0 size-4"
+          />
+          <span class="truncate">{{ categoryName }}</span>
         </span>
         <div
-          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap"
+          class="inline-flex items-center gap-1 text-n-slate-11 whitespace-nowrap shrink-0"
         >
           <Icon icon="i-lucide-eye" class="size-4" />
           <span class="text-sm">
@@ -187,7 +245,7 @@ const handleClick = id => {
           </span>
         </div>
       </div>
-      <span class="text-sm text-n-slate-11 line-clamp-1">
+      <span class="text-sm text-n-slate-11 line-clamp-1 shrink-0">
         {{ lastUpdatedAt }}
       </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/HelpCenterLayout.vue

@@ -67,11 +67,11 @@ const togglePortalSwitcher = () => {
         >
           <span
             v-if="activePortalName"
-            class="text-xl font-medium text-n-slate-12"
+            class="min-w-0 text-xl font-medium truncate text-n-slate-12"
           >
             {{ activePortalName }}
           </span>
-          <div v-if="activePortalName" class="relative group">
+          <div v-if="activePortalName" class="relative shrink-0 group">
             <OnClickOutside @trigger="showPortalSwitcher = false">
               <Button
                 icon="i-lucide-chevron-down"
@@ -91,6 +91,9 @@ const togglePortalSwitcher = () => {
             </OnClickOutside>
             <CreatePortalDialog ref="createPortalDialogRef" />
           </div>
+          <div class="flex justify-end min-w-0 grow">
+            <slot name="title-actions" />
+          </div>
         </div>
         <slot name="header-actions" />
       </div>

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

@@ -53,6 +53,9 @@ const localeMenuLabels = computed(() => ({
   'publish-locale': t(
     'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.PUBLISH_LOCALE'
   ),
+  'customize-content': t(
+    'HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.CUSTOMIZE_CONTENT'
+  ),
   delete: t('HELP_CENTER.LOCALES_PAGE.LOCALE_CARD.DROPDOWN_MENU.DELETE'),
 }));
 
@@ -128,7 +131,7 @@ const handleAction = ({ action, value }) => {
           <DropdownMenu
             v-if="showDropdownMenu"
             :menu-items="localeMenuItems"
-            class="ltr:right-0 rtl:left-0 mt-1 xl:ltr:left-0 xl:rtl:right-0 top-full z-60 min-w-[150px]"
+            class="ltr:right-0 rtl:left-0 mt-1 top-full z-60 min-w-[150px]"
             @action="handleAction"
           />
         </div>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { debounce } from '@chatwoot/utils';
 import { useI18n } from 'vue-i18n';
 import { ARTICLE_EDITOR_MENU_OPTIONS } from 'dashboard/constants/editor';
@@ -27,58 +27,50 @@ const props = defineProps({
 
 const emit = defineEmits([
   'saveArticle',
-  'saveArticleAsync',
   'goBack',
   'setAuthor',
   'setCategory',
   'previewArticle',
+  'createArticle',
 ]);
 
 const { t } = useI18n();
 
 const isNewArticle = computed(() => !props.article?.id);
 
-const saveAndSync = value => {
-  emit('saveArticle', value);
-};
+const localTitle = ref(props.article?.title ?? '');
+const localContent = ref(props.article?.content ?? '');
 
-// this will only send the data to the backend
-// but will not update the local state preventing unnecessary re-renders
-// since the data is already saved and we keep the editor text as the source of truth
-const quickSave = debounce(
-  value => emit('saveArticleAsync', value),
-  400,
-  false
+// Sync local state when navigating to a different article or on initial fetch
+watch(
+  () => props.article?.id,
+  newId => {
+    if (newId) {
+      localTitle.value = props.article?.title ?? '';
+      localContent.value = props.article?.content ?? '';
+    }
+  }
 );
 
-// 2.5 seconds is enough to know that the user has stopped typing and is taking a pause
-// so we can save the data to the backend and retrieve the updated data
-// this will update the local state with response data
-// Only use to save for existing articles
-const saveAndSyncDebounced = debounce(saveAndSync, 2500, false);
-
-// Debounced save for new articles
-const quickSaveNewArticle = debounce(saveAndSync, 400, false);
+const debouncedSave = debounce(value => emit('saveArticle', value), 500, false);
 
 const handleSave = value => {
-  if (isNewArticle.value) {
-    quickSaveNewArticle(value);
-  } else {
-    quickSave(value);
-    saveAndSyncDebounced(value);
-  }
+  if (isNewArticle.value) return;
+  debouncedSave(value);
 };
 
 const articleTitle = computed({
-  get: () => props.article.title,
+  get: () => localTitle.value,
   set: value => {
+    localTitle.value = value;
     handleSave({ title: value });
   },
 });
 
 const articleContent = computed({
-  get: () => props.article.content,
+  get: () => localContent.value,
   set: content => {
+    localContent.value = content;
     handleSave({ content });
   },
 });
@@ -98,6 +90,14 @@ const setCategoryId = categoryId => {
 const previewArticle = () => {
   emit('previewArticle');
 };
+
+const handleCreateArticle = event => {
+  if (!isNewArticle.value) return;
+  const title = event?.target?.value || '';
+  if (title.trim()) {
+    emit('createArticle', { title, content: localContent.value });
+  }
+};
 </script>
 
 <template>
@@ -121,11 +121,12 @@ const previewArticle = () => {
           custom-text-area-class="!text-[32px] !leading-[48px] !font-medium !tracking-[0.2px]"
           custom-text-area-wrapper-class="border-0 !bg-transparent dark:!bg-transparent !py-0 !px-0"
           placeholder="Title"
-          autofocus
+          :autofocus="isNewArticle"
+          @blur="handleCreateArticle"
         />
         <ArticleEditorControls
           :article="article"
-          @save-article="saveAndSync"
+          @save-article="values => emit('saveArticle', values)"
           @set-author="setAuthorId"
           @set-category="setCategoryId"
         />
@@ -137,53 +138,50 @@ const previewArticle = () => {
           t('HELP_CENTER.EDIT_ARTICLE_PAGE.EDIT_ARTICLE.EDITOR_PLACEHOLDER')
         "
         :enabled-menu-options="ARTICLE_EDITOR_MENU_OPTIONS"
-        :autofocus="false"
+        :autofocus="!isNewArticle"
       />
     </template>
   </HelpCenterLayout>
 </template>
 
 <style lang="scss" scoped>
-::v-deep {
-  .ProseMirror .empty-node::before {
-    @apply text-n-slate-10 text-base;
-  }
+:deep(.ProseMirror .empty-node::before) {
+  @apply text-n-slate-10 text-base;
+}
 
-  .ProseMirror-menubar-wrapper {
-    .ProseMirror-woot-style {
-      @apply min-h-[15rem] max-h-full;
-    }
+:deep(.ProseMirror-menubar-wrapper) {
+  .ProseMirror-woot-style {
+    @apply min-h-[15rem] max-h-full;
+  }
+}
+
+:deep(.ProseMirror-menubar) {
+  display: none; // Hide by default
+}
+
+:deep(.editor-root .has-selection) {
+  .ProseMirror-menubar:not(:has(*)) {
+    display: none !important;
   }
 
   .ProseMirror-menubar {
-    display: none; // Hide by default
-  }
+    @apply rounded-lg !px-3 !py-1.5 z-50 bg-n-background items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
+    display: flex;
+    top: var(--selection-top, auto) !important;
+    left: var(--selection-left, 0) !important;
+    width: fit-content !important;
+    position: absolute !important;
 
-  .editor-root .has-selection {
-    .ProseMirror-menubar {
-      @apply h-8 rounded-lg !px-2 z-50 bg-n-solid-3 items-center gap-4 ml-0 mb-0 shadow-md outline outline-1 outline-n-weak;
-      display: flex;
-      top: var(--selection-top, auto) !important;
-      left: var(--selection-left, 0) !important;
-      width: fit-content !important;
-      position: absolute !important;
+    .ProseMirror-menuitem {
+      @apply ltr:mr-0 rtl:ml-0 size-4 flex items-center;
 
-      .ProseMirror-menuitem {
-        @apply mr-0;
-
-        .ProseMirror-icon {
-          @apply p-0 mt-0 !mr-0;
-
-          svg {
-            width: 20px !important;
-            height: 20px !important;
-          }
-        }
+      .ProseMirror-icon {
+        @apply p-0.5 flex-shrink-0 ltr:mr-2 rtl:ml-2;
       }
+    }
 
-      .ProseMirror-menu-active {
-        @apply bg-n-slate-3;
-      }
+    .ProseMirror-menu-active {
+      @apply bg-n-slate-3;
     }
   }
 }

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({
@@ -84,28 +85,20 @@ const findCategoryFromSlug = slug => {
   return categories.value?.find(category => category.slug === slug);
 };
 
-const assignCategoryFromSlug = slug => {
-  const categoryFromSlug = findCategoryFromSlug(slug);
-  if (categoryFromSlug) {
-    selectedCategoryId.value = categoryFromSlug.id;
-    return categoryFromSlug;
-  }
-  return null;
-};
-
 const selectedCategory = computed(() => {
   if (isNewArticle.value) {
+    if (selectedCategoryId.value) {
+      return (
+        categories.value?.find(c => c.id === selectedCategoryId.value) || null
+      );
+    }
     if (categorySlugFromRoute.value) {
-      const categoryFromSlug = assignCategoryFromSlug(
+      const categoryFromSlug = findCategoryFromSlug(
         categorySlugFromRoute.value
       );
       if (categoryFromSlug) return categoryFromSlug;
     }
-    return selectedCategoryId.value
-      ? categories.value.find(
-          category => category.id === selectedCategoryId.value
-        )
-      : categories.value[0] || null;
+    return categories.value?.[0] || null;
   }
   return categories.value.find(
     category => category.id === props.article?.category?.id
@@ -115,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,
@@ -201,7 +195,7 @@ onMounted(() => {
           v-if="openAgentsList && hasAgentList"
           :menu-items="agentList"
           show-search
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
+          class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-60"
           @action="handleArticleAction"
         />
       </OnClickOutside>
@@ -210,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"
@@ -221,19 +211,27 @@ 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
           v-if="openCategoryList && hasCategoryMenuItems"
           :menu-items="categoryList"
           show-search
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
+          class="w-48 mt-2 z-[100] left-0 top-full max-h-60"
           @action="handleArticleAction"
         />
       </OnClickOutside>

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;
@@ -159,7 +158,7 @@ const handleTabChange = value => {
               v-if="isLocaleMenuOpen"
               :menu-items="localeMenuItems"
               show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-40 max-w-[300px] mt-2 xl:right-0 top-full max-h-60"
               @action="handleLocaleAction"
             />
           </OnClickOutside>
@@ -167,20 +166,29 @@ 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"
               :menu-items="categoryMenuItems"
               show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-48 mt-2 xl:right-0 top-full max-h-60"
               @action="handleCategoryAction"
             />
           </OnClickOutside>

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

@@ -1,6 +1,5 @@
 <script setup>
-import { ref, computed, watch } from 'vue';
-import Draggable from 'vuedraggable';
+import { computed, ref } from 'vue';
 import { useMapGetter, useStore } from 'dashboard/composables/store.js';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
@@ -10,6 +9,7 @@ import { getArticleStatus } from 'dashboard/helper/portalHelper.js';
 import wootConstants from 'dashboard/constants/globals';
 
 import ArticleCard from 'dashboard/components-next/HelpCenter/ArticleCard/ArticleCard.vue';
+import DraggableReorderList from 'dashboard/components-next/DraggableReorderList/DraggableReorderList.vue';
 
 const props = defineProps({
   articles: {
@@ -20,8 +20,31 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  selectedArticleIds: {
+    type: Set,
+    default: () => new Set(),
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+  totalPages: {
+    type: Number,
+    default: 1,
+  },
 });
 
+const emit = defineEmits([
+  'translateArticle',
+  'toggleSelect',
+  'navigatePage',
+  'dragging',
+]);
+
 const { ARTICLE_STATUS_TYPES } = wootConstants;
 
 const router = useRouter();
@@ -29,15 +52,34 @@ const route = useRoute();
 const store = useStore();
 const { t } = useI18n();
 
-const localArticles = ref(props.articles);
+const hoveredArticleId = ref(null);
 
 const dragEnabled = computed(() => {
-  // Enable dragging only for category articles and when there's more than one article
-  return props.isCategoryArticles && localArticles.value?.length > 1;
+  const canReorder = props.articles?.length > 1 || props.totalPages > 1;
+  return (
+    props.isCategoryArticles &&
+    !props.isSearching &&
+    canReorder &&
+    props.selectedArticleIds.size === 0
+  );
 });
 
+const hasBulkSelection = computed(() => props.selectedArticleIds.size > 0);
+
+const shouldShowSelectionControl = id => {
+  return hoveredArticleId.value === id || hasBulkSelection.value;
+};
+
+const handleCardHover = (isHovered, id) => {
+  hoveredArticleId.value = isHovered ? id : null;
+};
+
 const getCategoryById = useMapGetter('categories/categoryById');
 
+const getCategory = categoryId => {
+  return getCategoryById.value(categoryId) || { name: '', icon: '' };
+};
+
 const openArticle = id => {
   const { tab, categorySlug, locale } = route.params;
   if (props.isCategoryArticles) {
@@ -58,38 +100,25 @@ const openArticle = id => {
   }
 };
 
-const onReorder = async reorderedGroup => {
+const onReorder = async positionsHash => {
+  const [movedId] = Object.keys(positionsHash);
+  // A same-page reorder updates optimistically in the store, so it needs no
+  // refetch. Only a cross-page drop must refresh, to pull the moved article
+  // onto this page in its new spot.
+  const isCrossPage = !props.articles.some(
+    article => String(article.id) === movedId
+  );
   try {
     await store.dispatch('articles/reorder', {
-      reorderedGroup,
+      reorderedGroup: positionsHash,
       portalSlug: route.params.portalSlug,
     });
+    if (isCrossPage) emit('navigatePage', props.currentPage);
   } catch {
     useAlert(t('HELP_CENTER.REORDER_ARTICLE.API.ERROR_MESSAGE'));
   }
 };
 
-const onDragEnd = () => {
-  // Collect and sort existing positions, falling back to index+1 for null/0 values
-  const sortedArticlePositions = localArticles.value
-    .map((article, index) => article.position || index + 1)
-    .sort((a, b) => a - b);
-
-  const orderedArticles = localArticles.value.map(article => article.id);
-
-  // Create a map of article IDs to their new positions
-  const reorderedGroup = orderedArticles.reduce((obj, key, index) => {
-    obj[key] = sortedArticlePositions[index];
-    return obj;
-  }, {});
-
-  onReorder(reorderedGroup);
-};
-
-const getCategory = categoryId => {
-  return getCategoryById.value(categoryId) || { name: '', icon: '' };
-};
-
 const getStatusMessage = (status, isSuccess) => {
   const messageType = isSuccess ? 'SUCCESS' : 'ERROR';
   const statusMap = {
@@ -152,52 +181,53 @@ const handleArticleAction = async (action, { status, id }) => {
 };
 
 const updateArticle = ({ action, value, id }) => {
+  if (action === 'translate') {
+    emit('translateArticle', id);
+    return;
+  }
   const status = action !== 'delete' ? getArticleStatus(value) : null;
   handleArticleAction(action, { status, id });
 };
-
-// Watch for changes in the articles prop and update the localArticles ref
-watch(
-  () => props.articles,
-  newArticles => {
-    localArticles.value = newArticles;
-  },
-  { deep: true }
-);
 </script>
 
 <template>
-  <Draggable
-    v-model="localArticles"
+  <DraggableReorderList
+    :items="articles"
     :disabled="!dragEnabled"
-    item-key="id"
-    tag="ul"
-    ghost-class="article-ghost-class"
-    class="w-full h-full space-y-4"
-    @end="onDragEnd"
+    :current-page="currentPage"
+    :total-pages="totalPages"
+    @reorder="onReorder"
+    @navigate-page="page => emit('navigatePage', page)"
+    @dragging="value => emit('dragging', value)"
   >
-    <template #item="{ element }">
-      <li class="list-none rounded-2xl">
-        <ArticleCard
-          :id="element.id"
-          :key="element.id"
-          :title="element.title"
-          :status="element.status"
-          :author="element.author"
-          :category="getCategory(element.category.id)"
-          :views="element.views || 0"
-          :updated-at="element.updatedAt"
-          :class="{ 'cursor-grab': dragEnabled }"
-          @open-article="openArticle"
-          @article-action="updateArticle"
-        />
-      </li>
+    <template #item="{ item }">
+      <ArticleCard
+        :id="item.id"
+        :title="item.title"
+        :status="item.status"
+        :author="item.author"
+        :category="getCategory(item.category.id)"
+        :views="item.views || 0"
+        :updated-at="item.updatedAt"
+        :is-selected="selectedArticleIds.has(item.id)"
+        selectable
+        :show-selection-control="shouldShowSelectionControl(item.id)"
+        @open-article="openArticle"
+        @article-action="updateArticle"
+        @toggle-select="emit('toggleSelect', $event)"
+        @hover="isHovered => handleCardHover(isHovered, item.id)"
+      />
     </template>
-  </Draggable>
+    <template #ghost="{ item }">
+      <ArticleCard
+        :id="item.id"
+        :title="item.title"
+        :status="item.status"
+        :author="item.author"
+        :category="getCategory(item.category.id)"
+        :views="item.views || 0"
+        :updated-at="item.updatedAt"
+      />
+    </template>
+  </DraggableReorderList>
 </template>
-
-<style lang="scss" scoped>
-.article-ghost-class {
-  @apply opacity-50 bg-n-solid-1;
-}
-</style>

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

@@ -1,9 +1,15 @@
 <script setup>
-import { computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
+import { OnClickOutside } from '@vueuse/components';
 import { useMapGetter } from 'dashboard/composables/store.js';
+import { useConfig } from 'dashboard/composables/useConfig';
+import { debounce } from '@chatwoot/utils';
 import { ARTICLE_TABS, CATEGORY_ALL } from 'dashboard/helper/portalHelper';
+import { FEATURE_FLAGS } from 'dashboard/featureFlags';
+import { useAlert } from 'dashboard/composables';
+import articlesAPI from 'dashboard/api/helpCenter/articles';
 
 import HelpCenterLayout from 'dashboard/components-next/HelpCenter/HelpCenterLayout.vue';
 import ArticleList from 'dashboard/components-next/HelpCenter/Pages/ArticlePage/ArticleList.vue';
@@ -11,6 +17,12 @@ import ArticleHeaderControls from 'dashboard/components-next/HelpCenter/Pages/Ar
 import CategoryHeaderControls from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryHeaderControls.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ArticleEmptyState from 'dashboard/components-next/HelpCenter/EmptyState/Article/ArticleEmptyState.vue';
+import BulkSelectBar from 'dashboard/components-next/captain/assistant/BulkSelectBar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
+import BulkTranslateDialog from './BulkTranslateDialog.vue';
 
 const props = defineProps({
   articles: {
@@ -39,7 +51,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['pageChange', 'fetchPortal']);
+const emit = defineEmits([
+  'pageChange',
+  'fetchPortal',
+  'refreshArticles',
+  'search',
+]);
 
 const router = useRouter();
 const route = useRoute();
@@ -47,6 +64,47 @@ const { t } = useI18n();
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isFetching = useMapGetter('articles/isFetching');
+const currentAccountId = useMapGetter('getCurrentAccountId');
+const isFeatureEnabledonAccount = useMapGetter(
+  'accounts/isFeatureEnabledonAccount'
+);
+
+const selectedArticleIds = ref(new Set());
+const isArticleDragging = ref(false);
+const deleteConfirmDialogRef = ref(null);
+const isCategoryMenuOpen = ref(false);
+const searchQuery = ref(route.query.search || '');
+
+const debouncedSearch = debounce(() => emit('search', searchQuery.value), 500);
+
+const { isEnterprise } = useConfig();
+
+const isTranslationAvailable = computed(
+  () =>
+    isEnterprise &&
+    isFeatureEnabledonAccount.value(
+      currentAccountId.value,
+      FEATURE_FLAGS.CAPTAIN_TASKS
+    )
+);
+
+const allItems = computed(() => props.articles.map(a => ({ id: a.id })));
+const visibleArticleIds = computed(() => props.articles.map(a => a.id));
+
+const selectAllLabel = computed(() => {
+  if (!visibleArticleIds.value.length) return '';
+  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECT_ALL', {
+    count: visibleArticleIds.value.length,
+  });
+});
+
+const selectedCountLabel = computed(() =>
+  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.SELECTED_COUNT', {
+    count: selectedArticleIds.value.size,
+  })
+);
+
+const bulkTranslateDialogRef = ref(null);
 
 const hasNoArticles = computed(
   () => !isFetching.value && !props.articles.length
@@ -75,6 +133,7 @@ const updateRoute = newParams => {
       categorySlug: newParams.categorySlug ?? categorySlug,
       ...newParams,
     },
+    query: route.query,
   });
 };
 
@@ -90,6 +149,8 @@ const articlesCount = computed(() => {
   return Number(countMap[tab] || countMap['']);
 });
 
+const totalPages = computed(() => Math.ceil(articlesCount.value / 25) || 1);
+
 const showArticleHeaderControls = computed(
   () => !props.isCategoryArticles && !isSwitchingPortal.value
 );
@@ -98,7 +159,12 @@ const showCategoryHeaderControls = computed(
   () => props.isCategoryArticles && !isSwitchingPortal.value
 );
 
+const isSearching = computed(() => Boolean(searchQuery.value?.trim()));
+
 const getEmptyStateText = type => {
+  if (isSearching.value) {
+    return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.SEARCH.${type}`);
+  }
   if (props.isCategoryArticles) {
     return t(`HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.CATEGORY.${type}`);
   }
@@ -124,10 +190,115 @@ const handlePageChange = page => emit('pageChange', page);
 const navigateToNewArticlePage = () => {
   const { categorySlug, locale } = route.params;
   router.push({
-    name: 'portals_articles_new',
+    name: props.isCategoryArticles
+      ? 'portals_categories_articles_new'
+      : 'portals_articles_new',
     params: { categorySlug, locale },
   });
 };
+
+const handleToggleSelect = articleId => {
+  const newSet = new Set(selectedArticleIds.value);
+  if (newSet.has(articleId)) {
+    newSet.delete(articleId);
+  } else {
+    newSet.add(articleId);
+  }
+  selectedArticleIds.value = newSet;
+};
+
+const clearSelection = () => {
+  selectedArticleIds.value = new Set();
+};
+
+const handleTranslateArticle = articleId => {
+  selectedArticleIds.value = new Set([articleId]);
+  bulkTranslateDialogRef.value?.dialogRef?.open();
+};
+
+const openTranslateDialog = () => {
+  bulkTranslateDialogRef.value?.dialogRef?.open();
+};
+
+const onBulkActionSuccess = message => {
+  useAlert(message);
+  clearSelection();
+  emit('refreshArticles');
+};
+
+const bulkUpdateStatus = async status => {
+  try {
+    await articlesAPI.bulkUpdateStatus({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+      status,
+    });
+    onBulkActionSuccess(
+      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.STATUS_ERROR')
+    );
+  }
+};
+
+const categoryMenuItems = computed(() =>
+  props.categories.map(category => ({
+    label: category.name,
+    value: category.id,
+    action: 'move',
+    emoji: category.icon,
+    iconColor: category.icon_color,
+  }))
+);
+
+const handleBulkUpdateCategory = async ({ value }) => {
+  isCategoryMenuOpen.value = false;
+  try {
+    await articlesAPI.bulkUpdateCategory({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+      categoryId: value,
+    });
+    onBulkActionSuccess(
+      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_SUCCESS')
+    );
+  } catch (error) {
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.CATEGORY_ERROR')
+    );
+  }
+};
+
+const confirmBulkDelete = () => {
+  deleteConfirmDialogRef.value?.open();
+};
+
+const bulkDelete = async () => {
+  try {
+    await articlesAPI.bulkDelete({
+      portalSlug: route.params.portalSlug,
+      articleIds: [...selectedArticleIds.value],
+    });
+    deleteConfirmDialogRef.value?.close();
+    onBulkActionSuccess(
+      t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_SUCCESS')
+    );
+  } catch (error) {
+    deleteConfirmDialogRef.value?.close();
+    useAlert(
+      error?.message || t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_ERROR')
+    );
+  }
+};
+
+// Clear selection when articles change (page change, filter change)
+watch(
+  () => props.articles,
+  () => clearSelection()
+);
 </script>
 
 <template>
@@ -139,6 +310,19 @@ const navigateToNewArticlePage = () => {
     :show-pagination-footer="shouldShowPaginationFooter"
     @update:current-page="handlePageChange"
   >
+    <template #title-actions>
+      <Input
+        v-if="!isSwitchingPortal"
+        v-model="searchQuery"
+        :placeholder="
+          t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.SEARCH_PLACEHOLDER')
+        "
+        type="search"
+        size="sm"
+        class="w-full max-w-[16rem] min-w-0"
+        @input="debouncedSearch"
+      />
+    </template>
     <template #header-actions>
       <div class="flex items-end justify-between">
         <ArticleHeaderControls
@@ -156,32 +340,168 @@ const navigateToNewArticlePage = () => {
           :categories="categories"
           :allowed-locales="allowedLocales"
           :has-selected-category="isCategoryArticles"
+          @new-article="navigateToNewArticlePage"
         />
       </div>
     </template>
     <template #content>
       <div
-        v-if="isLoading"
+        v-if="isLoading && !isArticleDragging"
         class="flex items-center justify-center py-10 text-n-slate-11"
       >
         <Spinner />
       </div>
-      <ArticleList
-        v-else-if="!hasNoArticles"
-        :articles="articles"
-        :is-category-articles="isCategoryArticles"
-      />
+      <template v-else-if="!hasNoArticles">
+        <div
+          v-if="selectedArticleIds.size > 0"
+          class="sticky top-0 z-[5] bg-gradient-to-b from-n-surface-1 from-90% to-transparent pt-1 pb-2"
+        >
+          <BulkSelectBar
+            v-model="selectedArticleIds"
+            :all-items="allItems"
+            :select-all-label="selectAllLabel"
+            :selected-count-label="selectedCountLabel"
+            class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
+          >
+            <template #secondaryActions>
+              <Button
+                sm
+                ghost
+                slate
+                :label="
+                  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CLEAR_SELECTION')
+                "
+                class="!px-1.5"
+                @click="clearSelection"
+              />
+            </template>
+            <template #actions>
+              <div class="flex items-center gap-2 ml-auto">
+                <Button
+                  sm
+                  faded
+                  slate
+                  icon="i-lucide-check"
+                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.PUBLISH')"
+                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                  @click="bulkUpdateStatus('published')"
+                />
+                <Button
+                  sm
+                  faded
+                  slate
+                  icon="i-lucide-pencil-line"
+                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DRAFT')"
+                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                  @click="bulkUpdateStatus('draft')"
+                />
+                <Button
+                  sm
+                  faded
+                  slate
+                  icon="i-lucide-archive-restore"
+                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.ARCHIVE')"
+                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                  @click="bulkUpdateStatus('archived')"
+                />
+                <div v-if="categoryMenuItems.length" class="relative group">
+                  <OnClickOutside @trigger="isCategoryMenuOpen = false">
+                    <Button
+                      sm
+                      faded
+                      slate
+                      icon="i-lucide-folder-input"
+                      :label="
+                        t(
+                          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.MOVE_TO_CATEGORY'
+                        )
+                      "
+                      class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                      @click="isCategoryMenuOpen = !isCategoryMenuOpen"
+                    />
+                    <DropdownMenu
+                      v-if="isCategoryMenuOpen"
+                      :menu-items="categoryMenuItems"
+                      show-search
+                      class="right-0 w-48 mt-2 top-full max-h-60"
+                      @action="handleBulkUpdateCategory"
+                    />
+                  </OnClickOutside>
+                </div>
+                <Button
+                  v-if="isTranslationAvailable"
+                  sm
+                  faded
+                  slate
+                  icon="i-lucide-languages"
+                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.TRANSLATE')"
+                  class="[&>span:nth-child(2)]:hidden sm:[&>span:nth-child(2)]:inline w-fit"
+                  @click="openTranslateDialog"
+                />
+                <Button
+                  sm
+                  faded
+                  ruby
+                  icon="i-lucide-trash"
+                  :label="t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE')"
+                  class="!px-1.5 [&>span:nth-child(2)]:hidden"
+                  @click="confirmBulkDelete"
+                />
+              </div>
+            </template>
+          </BulkSelectBar>
+        </div>
+        <ArticleList
+          :articles="articles"
+          :is-category-articles="isCategoryArticles"
+          :is-searching="isSearching"
+          :selected-article-ids="selectedArticleIds"
+          :current-page="Number(meta.currentPage)"
+          :total-pages="totalPages"
+          class="relative z-0"
+          @translate-article="handleTranslateArticle"
+          @toggle-select="handleToggleSelect"
+          @navigate-page="handlePageChange"
+          @dragging="isArticleDragging = $event"
+        />
+      </template>
       <ArticleEmptyState
         v-else
         class="pt-14"
         :title="getEmptyStateTitle"
         :subtitle="getEmptyStateSubtitle"
-        :show-button="hasNoArticlesInPortal"
+        :show-button="hasNoArticlesInPortal && !isSearching"
         :button-label="
           t('HELP_CENTER.ARTICLES_PAGE.EMPTY_STATE.ALL.BUTTON_LABEL')
         "
         @click="navigateToNewArticlePage"
       />
     </template>
+    <BulkTranslateDialog
+      ref="bulkTranslateDialogRef"
+      :selected-article-ids="[...selectedArticleIds]"
+      :allowed-locales="allowedLocales"
+      @translate-started="clearSelection"
+    />
+    <Dialog
+      ref="deleteConfirmDialogRef"
+      type="alert"
+      :title="
+        t(
+          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_TITLE',
+          selectedArticleIds.size
+        )
+      "
+      :description="
+        t(
+          'HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM_DESCRIPTION',
+          selectedArticleIds.size
+        )
+      "
+      :confirm-button-label="
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_ACTIONS.DELETE_CONFIRM')
+      "
+      @confirm="bulkDelete"
+    />
   </HelpCenterLayout>
 </template>

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

@@ -0,0 +1,249 @@
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'dashboard/composables/store';
+import { useAlert } from 'dashboard/composables';
+import categoriesAPI from 'dashboard/api/helpCenter/categories.js';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import Icon from 'dashboard/components-next/icon/Icon.vue';
+
+const props = defineProps({
+  selectedArticleIds: {
+    type: Array,
+    default: () => [],
+  },
+  allowedLocales: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['translateStarted']);
+
+const { t } = useI18n();
+const store = useStore();
+const route = useRoute();
+const router = useRouter();
+
+const dialogRef = ref(null);
+const isSubmitting = ref(false);
+const selectedLocale = ref('');
+const selectedCategoryId = ref('');
+const targetCategories = ref([]);
+const isFetchingCategories = ref(false);
+const duplicateArticles = ref([]);
+
+const currentLocale = computed(() => route.params.locale);
+
+const localeOptions = computed(() => {
+  return props.allowedLocales
+    .filter(locale => locale.code !== currentLocale.value)
+    .map(locale => ({
+      value: locale.code,
+      label: `${locale.name} (${locale.code})`,
+    }));
+});
+
+const categoryOptions = computed(() => {
+  return targetCategories.value.map(category => ({
+    value: category.id,
+    label: category.name,
+  }));
+});
+
+const articleCount = computed(() => props.selectedArticleIds.length);
+
+const dialogTitle = computed(() =>
+  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.TITLE', articleCount.value)
+);
+
+const description = computed(() =>
+  t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DESCRIPTION', articleCount.value)
+);
+
+const hasDuplicates = computed(() => duplicateArticles.value.length > 0);
+
+const confirmLabel = computed(() => {
+  if (hasDuplicates.value) {
+    return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM_OVERWRITE');
+  }
+  return t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CONFIRM');
+});
+
+const isConfirmDisabled = computed(() => {
+  return !selectedLocale.value || isSubmitting.value;
+});
+
+const articleEditUrl = articleId => {
+  const { portalSlug, categorySlug, tab } = route.params;
+  const resolved = router.resolve({
+    name: 'portals_articles_edit',
+    params: {
+      portalSlug,
+      locale: selectedLocale.value,
+      categorySlug,
+      tab,
+      articleSlug: articleId,
+    },
+  });
+  return resolved.href;
+};
+
+const fetchCategoriesForLocale = async locale => {
+  if (!locale) {
+    targetCategories.value = [];
+    return;
+  }
+
+  isFetchingCategories.value = true;
+  try {
+    const { data } = await categoriesAPI.get({
+      portalSlug: route.params.portalSlug,
+      locale,
+    });
+    targetCategories.value = data.payload;
+  } catch {
+    targetCategories.value = [];
+  } finally {
+    isFetchingCategories.value = false;
+  }
+};
+
+watch(selectedLocale, newLocale => {
+  selectedCategoryId.value = '';
+  duplicateArticles.value = [];
+  fetchCategoriesForLocale(newLocale);
+});
+
+const resetForm = () => {
+  selectedLocale.value = '';
+  selectedCategoryId.value = '';
+  targetCategories.value = [];
+  duplicateArticles.value = [];
+};
+
+const submitTranslation = async (force = false) => {
+  isSubmitting.value = true;
+  try {
+    await store.dispatch('articles/bulkTranslate', {
+      portalSlug: route.params.portalSlug,
+      articleIds: props.selectedArticleIds,
+      locale: selectedLocale.value,
+      categoryId: selectedCategoryId.value,
+      force,
+    });
+
+    useAlert(t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.SUCCESS_MESSAGE'));
+    resetForm();
+    dialogRef.value?.close();
+    emit('translateStarted');
+  } catch (error) {
+    if (error.response?.status === 409) {
+      duplicateArticles.value = error.response.data.duplicate_articles;
+      return;
+    }
+    useAlert(
+      error?.message ||
+        t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.API.ERROR_MESSAGE')
+    );
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+
+const onConfirm = () => {
+  if (isConfirmDisabled.value) return;
+  submitTranslation(hasDuplicates.value);
+};
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    :title="dialogTitle"
+    :description="description"
+    :confirm-button-label="confirmLabel"
+    :disable-confirm-button="isConfirmDisabled"
+    :is-loading="isSubmitting"
+    @close="resetForm"
+    @confirm="onConfirm"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-2">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_LABEL') }}
+        </span>
+        <ComboBox
+          v-model="selectedLocale"
+          :options="localeOptions"
+          :placeholder="
+            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.LOCALE_PLACEHOLDER')
+          "
+          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
+        />
+      </div>
+      <div class="flex flex-col gap-2">
+        <span class="text-sm font-medium text-n-slate-12">
+          {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_LABEL') }}
+          <span class="text-n-slate-10 font-normal">
+            {{ t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.OPTIONAL') }}
+          </span>
+        </span>
+        <ComboBox
+          v-model="selectedCategoryId"
+          :options="categoryOptions"
+          :disabled="!selectedLocale || isFetchingCategories"
+          :placeholder="
+            t('HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.CATEGORY_PLACEHOLDER')
+          "
+          class="[&>div>button:not(.focused)]:!outline-n-slate-5 [&>div>button:not(.focused)]:dark:!outline-n-slate-5"
+        />
+      </div>
+      <div
+        v-if="hasDuplicates"
+        class="flex gap-3 p-3 rounded-xl bg-n-amber-2 border border-n-amber-5"
+      >
+        <Icon
+          icon="i-lucide-triangle-alert"
+          class="size-4 mt-0.5 text-n-amber-11 shrink-0"
+        />
+        <div class="flex flex-col gap-2 min-w-0">
+          <p class="text-sm text-n-amber-12 m-0">
+            {{
+              t(
+                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_WARNING',
+                duplicateArticles.length
+              )
+            }}
+          </p>
+          <div class="flex flex-col gap-1">
+            <a
+              v-for="article in duplicateArticles"
+              :key="article.id"
+              :href="articleEditUrl(article.id)"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="inline-flex items-center gap-1 text-sm text-n-amber-12 underline underline-offset-2 hover:text-n-amber-11 truncate"
+            >
+              {{ article.title }}
+              <Icon icon="i-lucide-external-link" class="size-3 shrink-0" />
+            </a>
+          </div>
+          <p class="text-xs text-n-amber-11 m-0">
+            {{
+              t(
+                'HELP_CENTER.ARTICLES_PAGE.BULK_TRANSLATE.DUPLICATE_CONFIRM_HINT'
+              )
+            }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </Dialog>
+</template>

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

@@ -37,10 +37,21 @@ const { t } = useI18n();
 
 const editCategoryDialog = ref(null);
 const selectedCategory = ref(null);
+const searchQuery = ref('');
 
 const isSwitchingPortal = useMapGetter('portals/isSwitchingPortal');
 const isLoading = computed(() => props.isFetching || isSwitchingPortal.value);
-const hasCategories = computed(() => props.categories?.length > 0);
+
+const filteredCategories = computed(() => {
+  const query = searchQuery.value.trim().toLowerCase();
+  if (!query) return props.categories;
+  return props.categories.filter(category =>
+    category.name?.toLowerCase().includes(query)
+  );
+});
+
+const hasCategories = computed(() => filteredCategories.value?.length > 0);
+const isSearching = computed(() => searchQuery.value.trim().length > 0);
 
 const updateRoute = (newParams, routeName) => {
   const { accountId, portalSlug, locale } = route.params;
@@ -115,6 +126,7 @@ const reorderCategories = async reorderedGroup => {
   <HelpCenterLayout :show-pagination-footer="false">
     <template #header-actions>
       <CategoryHeaderControls
+        v-model:search-query="searchQuery"
         :categories="categories"
         :is-category-articles="false"
         :allowed-locales="allowedLocales"
@@ -130,11 +142,18 @@ const reorderCategories = async reorderedGroup => {
       </div>
       <CategoryList
         v-else-if="hasCategories"
-        :categories="categories"
+        :categories="filteredCategories"
+        :disable-drag="isSearching"
         @click="openCategoryArticles"
         @action="handleAction"
         @reorder="reorderCategories"
       />
+      <CategoryEmptyState
+        v-else-if="isSearching"
+        class="pt-14"
+        :title="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.TITLE')"
+        :subtitle="t('HELP_CENTER.CATEGORY_PAGE.SEARCH_EMPTY_STATE.SUBTITLE')"
+      />
       <CategoryEmptyState
         v-else
         class="pt-14"

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.4rem] !w-[2.375rem] absolute top-[1.94rem] !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

@@ -6,6 +6,7 @@ import { OnClickOutside } from '@vueuse/components';
 import { useStoreGetters } from 'dashboard/composables/store.js';
 
 import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
 import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
 import CategoryDialog from 'dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryDialog.vue';
@@ -25,7 +26,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['localeChange']);
+const emit = defineEmits(['localeChange', 'newArticle']);
+
+const searchQuery = defineModel('searchQuery', {
+  type: String,
+  default: '',
+});
 
 const route = useRoute();
 const router = useRouter();
@@ -106,6 +112,7 @@ const breadcrumbItems = computed(() => {
         }
       ),
       emoji: selectedCategoryEmoji.value,
+      iconColor: selectedCategory.value?.icon_color,
     });
   }
   return items;
@@ -142,7 +149,7 @@ const handleBreadcrumbClick = () => {
             v-if="isLocaleMenuOpen"
             :menu-items="localeMenuItems"
             show-search
-            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+            class="left-0 w-40 mt-2 xl:right-0 top-full max-h-60"
             @action="handleLocaleAction"
           />
         </OnClickOutside>
@@ -161,25 +168,36 @@ const handleBreadcrumbClick = () => {
       :items="breadcrumbItems"
       @click="handleBreadcrumbClick"
     />
-    <div v-if="!hasSelectedCategory" class="relative">
-      <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
-        <Button
-          :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
-          icon="i-lucide-plus"
-          size="sm"
-          @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
-        />
-        <CategoryDialog
-          v-if="isCreateCategoryDialogOpen"
-          mode="create"
-          :portal-name="currentPortalName"
-          :active-locale-name="activeLocaleName"
-          :active-locale-code="activeLocaleCode"
-          @close="isCreateCategoryDialogOpen = false"
-        />
-      </OnClickOutside>
+    <div v-if="!hasSelectedCategory" class="flex items-center gap-2">
+      <Input
+        v-model="searchQuery"
+        :placeholder="
+          t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.SEARCH_PLACEHOLDER')
+        "
+        type="search"
+        size="sm"
+        class="w-48"
+      />
+      <div class="relative">
+        <OnClickOutside @trigger="isCreateCategoryDialogOpen = false">
+          <Button
+            :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.NEW_CATEGORY')"
+            icon="i-lucide-plus"
+            size="sm"
+            @click="isCreateCategoryDialogOpen = !isCreateCategoryDialogOpen"
+          />
+          <CategoryDialog
+            v-if="isCreateCategoryDialogOpen"
+            mode="create"
+            :portal-name="currentPortalName"
+            :active-locale-name="activeLocaleName"
+            :active-locale-code="activeLocaleCode"
+            @close="isCreateCategoryDialogOpen = false"
+          />
+        </OnClickOutside>
+      </div>
     </div>
-    <div v-else class="relative">
+    <div v-else class="relative flex items-center gap-2">
       <OnClickOutside @trigger="isEditCategoryDialogOpen = false">
         <Button
           :label="t('HELP_CENTER.CATEGORY_PAGE.CATEGORY_HEADER.EDIT_CATEGORY')"
@@ -196,6 +214,12 @@ const handleBreadcrumbClick = () => {
           @close="isEditCategoryDialogOpen = false"
         />
       </OnClickOutside>
+      <Button
+        :label="t('HELP_CENTER.ARTICLES_PAGE.ARTICLES_HEADER.NEW_ARTICLE')"
+        icon="i-lucide-plus"
+        size="sm"
+        @click="emit('newArticle')"
+      />
     </div>
   </div>
 </template>

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

@@ -8,6 +8,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  disableDrag: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(['click', 'action', 'reorder']);
@@ -15,7 +19,7 @@ const emit = defineEmits(['click', 'action', 'reorder']);
 const localCategories = ref(props.categories);
 
 const dragEnabled = computed(() => {
-  return localCategories.value?.length > 1;
+  return !props.disableDrag && localCategories.value?.length > 1;
 });
 
 const handleClick = slug => {
@@ -68,6 +72,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 {