feat: Rewrite uiSettings mixin to a composable (#9819)

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

@@ -12,10 +12,10 @@
     <div
       v-if="showActionsDropdown"
       v-on-clickaway="closeDropdown"
-      class="dropdown-pane dropdown-pane--open mt-1 right-0 basic-filter"
+      class="right-0 mt-1 dropdown-pane dropdown-pane--open basic-filter"
     >
-      <div class="items-center flex justify-between last:mt-4">
-        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.STATUS')
         }}</span>
         <filter-item
@@ -26,8 +26,8 @@
           @onChangeFilter="onChangeFilter"
         />
       </div>
-      <div class="items-center flex justify-between last:mt-4">
-        <span class="text-slate-800 dark:text-slate-100 text-xs font-medium">{{
+      <div class="flex items-center justify-between last:mt-4">
+        <span class="text-xs font-medium text-slate-800 dark:text-slate-100">{{
           $t('CHAT_LIST.CHAT_SORT.ORDER_BY')
         }}</span>
         <filter-item
@@ -46,13 +46,19 @@
 import wootConstants from 'dashboard/constants/globals';
 import { mapGetters } from 'vuex';
 import FilterItem from './FilterItem.vue';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 
 export default {
   components: {
     FilterItem,
   },
-  mixins: [uiSettingsMixin],
+  setup() {
+    const { updateUISettings } = useUISettings();
+
+    return {
+      updateUISettings,
+    };
+  },
   data() {
     return {
       showActionsDropdown: false,

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

@@ -154,6 +154,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import { useAlert } from 'dashboard/composables';
+import { useUISettings } from 'dashboard/composables/useUISettings';
 import keyboardEventListenerMixins from 'shared/mixins/keyboardEventListenerMixins';
 
 import CannedResponse from './CannedResponse.vue';
@@ -180,10 +181,8 @@ import {
 import WhatsappTemplates from './WhatsappTemplates/Modal.vue';
 import { MESSAGE_MAX_LENGTH } from 'shared/helpers/MessageTypeHelper';
 import inboxMixin, { INBOX_FEATURES } from 'shared/mixins/inboxMixin';
-import uiSettingsMixin from 'dashboard/mixins/uiSettings';
 import { trimContent, debounce } from '@chatwoot/utils';
 import wootConstants from 'dashboard/constants/globals';
-import { isEditorHotKeyEnabled } from 'dashboard/mixins/uiSettings';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
 import rtlMixin from 'shared/mixins/rtlMixin';
 import fileUploadMixin from 'dashboard/mixins/fileUploadMixin';
@@ -218,7 +217,6 @@ export default {
   },
   mixins: [
     inboxMixin,
-    uiSettingsMixin,
     messageFormatterMixin,
     rtlMixin,
     fileUploadMixin,
@@ -230,6 +228,21 @@ export default {
       default: false,
     },
   },
+  setup() {
+    const {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    } = useUISettings();
+
+    return {
+      uiSettings,
+      updateUISettings,
+      isEditorHotKeyEnabled,
+      fetchSignatureFlagFromUISettings,
+    };
+  },
   data() {
     return {
       message: '',
@@ -405,7 +418,7 @@ export default {
       if (this.isPrivate) {
         sendMessageText = this.$t('CONVERSATION.REPLYBOX.CREATE');
       }
-      const keyLabel = isEditorHotKeyEnabled(this.uiSettings, 'cmd_enter')
+      const keyLabel = this.isEditorHotKeyEnabled('cmd_enter')
         ? '(⌘ + ↵)'
         : '(↵)';
       return `${sendMessageText} ${keyLabel}`;
@@ -478,7 +491,7 @@ export default {
       return !!this.signatureToApply;
     },
     sendWithSignature() {
-      return this.fetchSignatureFlagFromUiSettings(this.channelType);
+      return this.fetchSignatureFlagFromUISettings(this.channelType);
     },
     editorMessageKey() {
       const { editor_message_key: isEnabled } = this.uiSettings;
@@ -747,7 +760,7 @@ export default {
         !this.showCannedMenu &&
         !this.showVariablesMenu &&
         this.isFocused &&
-        isEditorHotKeyEnabled(this.uiSettings, selectedKey)
+        this.isEditorHotKeyEnabled(selectedKey)
       );
     },
     onPaste(e) {