chore: Update reply editor design (#10575)

# Pull Request Template

## Description

This PR will update the reply message editor’s design.

**Screen recording**


https://github.com/user-attachments/assets/40f61903-6bf7-4031-9a36-9027dffc46aa

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue

@@ -1,9 +1,15 @@
 <script>
 import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
+import NextButton from 'dashboard/components-next/button/Button.vue';
+import EditorModeToggle from './EditorModeToggle.vue';
 
 export default {
   name: 'ReplyTopPanel',
+  components: {
+    NextButton,
+    EditorModeToggle,
+  },
   props: {
     mode: {
       type: String,
@@ -17,10 +23,6 @@ export default {
       type: Number,
       default: () => 0,
     },
-    popoutReplyBox: {
-      type: Boolean,
-      default: false,
-    },
   },
   emits: ['setReplyMode', 'togglePopout'],
   setup(props, { emit }) {
@@ -33,6 +35,13 @@ export default {
     const handleNoteClick = () => {
       setReplyMode(REPLY_EDITOR_MODES.NOTE);
     };
+    const handleModeToggle = () => {
+      const newMode =
+        props.mode === REPLY_EDITOR_MODES.REPLY
+          ? REPLY_EDITOR_MODES.NOTE
+          : REPLY_EDITOR_MODES.REPLY;
+      setReplyMode(newMode);
+    };
     const keyboardEvents = {
       'Alt+KeyP': {
         action: () => handleNoteClick(),
@@ -46,8 +55,10 @@ export default {
     useKeyboardEvents(keyboardEvents);
 
     return {
+      handleModeToggle,
       handleReplyClick,
       handleNoteClick,
+      REPLY_EDITOR_MODES,
     };
   },
   computed: {
@@ -74,27 +85,12 @@ export default {
 </script>
 
 <template>
-  <div class="flex justify-between bg-black-50 dark:bg-slate-800">
-    <div class="button-group">
-      <woot-button
-        variant="clear"
-        class="button--reply"
-        :class="replyButtonClass"
-        @click="handleReplyClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.REPLY') }}
-      </woot-button>
-
-      <woot-button
-        class="button--note"
-        variant="clear"
-        color-scheme="warning"
-        :class="noteButtonClass"
-        @click="handleNoteClick"
-      >
-        {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
-      </woot-button>
-    </div>
+  <div class="flex justify-between h-[52px] gap-2 ltr:pl-3 rtl:pr-3">
+    <EditorModeToggle
+      :mode="mode"
+      class="mt-3"
+      @toggle-mode="handleModeToggle"
+    />
     <div class="flex items-center mx-4 my-0">
       <div v-if="isMessageLengthReachingThreshold" class="text-xs">
         <span :class="charLengthClass">
@@ -102,20 +98,10 @@ export default {
         </span>
       </div>
     </div>
-    <woot-button
-      v-if="popoutReplyBox"
-      variant="clear"
-      icon="dismiss"
-      color-scheme="secondary"
-      class-names="popout-button"
-      @click="$emit('togglePopout')"
-    />
-    <woot-button
-      v-else
-      variant="clear"
-      icon="resize-large"
-      color-scheme="secondary"
-      class-names="popout-button"
+    <NextButton
+      ghost
+      class="ltr:rounded-bl-md rtl:rounded-br-md ltr:rounded-br-none rtl:rounded-bl-none ltr:rounded-tl-none rtl:rounded-tr-none text-n-slate-11 ltr:rounded-tr-[11px] rtl:rounded-tl-[11px]"
+      icon="i-lucide-maximize-2"
       @click="$emit('togglePopout')"
     />
   </div>
@@ -127,28 +113,35 @@ export default {
 
   .button {
     @apply text-sm font-medium py-2.5 px-4 m-0 relative z-10;
+
     &.is-active {
       @apply bg-white dark:bg-slate-900;
     }
   }
+
   .button--reply {
     @apply border-r rounded-none border-b-0 border-l-0 border-t-0 border-slate-50 dark:border-slate-700;
+
     &:hover,
     &:focus {
       @apply border-r border-slate-50 dark:border-slate-700;
     }
   }
+
   .button--note {
     @apply border-l-0 rounded-none;
+
     &.is-active {
       @apply border-r border-b-0 bg-yellow-100 dark:bg-yellow-800 border-t-0 border-slate-50 dark:border-slate-700;
     }
+
     &:hover,
     &:active {
       @apply text-yellow-700 dark:text-yellow-700;
     }
   }
 }
+
 .button--note {
   @apply text-yellow-600 dark:text-yellow-600 bg-transparent dark:bg-transparent;
 }