fix: Editor toggle button not showing the correct active mode (#12350)

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

@@ -8,6 +8,10 @@ const props = defineProps({
     type: String,
     default: REPLY_EDITOR_MODES.REPLY,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 defineEmits(['toggleMode']);
@@ -20,9 +24,12 @@ const privateModeSize = useElementSize(wootEditorPrivateMode);
 
 /**
  * Computed boolean indicating if the editor is in private note mode
+ * When disabled, always show NOTE mode regardless of actual mode prop
  * @type {ComputedRef<boolean>}
  */
-const isPrivate = computed(() => props.mode === REPLY_EDITOR_MODES.NOTE);
+const isPrivate = computed(() => {
+  return props.disabled || props.mode === REPLY_EDITOR_MODES.NOTE;
+});
 
 /**
  * Computes the width of the sliding background chip in pixels
@@ -53,6 +60,10 @@ const translateValue = computed(() => {
 <template>
   <button
     class="flex items-center w-auto h-8 p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0"
+    :disabled="disabled"
+    :class="{
+      'cursor-not-allowed': disabled,
+    }"
     @click="$emit('toggleMode')"
   >
     <div ref="wootEditorReplyMode" class="flex items-center gap-1 px-2 z-20">
@@ -62,7 +73,10 @@ const translateValue = computed(() => {
       {{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
     </div>
     <div
-      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] transition-all duration-300 ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="{
+        'transition-all duration-300': !disabled,
+      }"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,