refactor: moved cc & bcc button from header to 'TO' section

frontend/src/components/CommunicationArea.vue

@@ -23,18 +23,6 @@
         </template>
       </Button>
     </div>
-    <div v-if="showEmailBox" class="flex gap-1.5">
-      <Button
-        :label="__('CC')"
-        @click="toggleCC()"
-        :class="[newEmailEditor.cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-      />
-      <Button
-        :label="__('BCC')"
-        @click="toggleBCC()"
-        :class="[newEmailEditor.bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-      />
-    </div>
   </div>
   <div
     v-show="showEmailBox"
@@ -103,7 +91,7 @@ import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import { usersStore } from '@/stores/users'
 import { useStorage } from '@vueuse/core'
 import { call, createResource } from 'frappe-ui'
-import { ref, watch, computed, nextTick } from 'vue'
+import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -236,22 +224,6 @@ async function submitComment() {
   emit('scroll')
 }
 
-function toggleCC() {
-  newEmailEditor.value.cc = !newEmailEditor.value.cc
-  newEmailEditor.value.cc &&
-    nextTick(() => {
-      newEmailEditor.value.ccInput.setFocus()
-    })
-}
-
-function toggleBCC() {
-  newEmailEditor.value.bcc = !newEmailEditor.value.bcc
-  newEmailEditor.value.bcc &&
-    nextTick(() => {
-      newEmailEditor.value.bccInput.setFocus()
-    })
-}
-
 function toggleEmailBox() {
   if (showCommentBox.value) {
     showCommentBox.value = false

frontend/src/components/Controls/MultiselectInput.vue

@@ -8,7 +8,7 @@
         :label="value"
         theme="gray"
         variant="subtle"
-        class="rounded-full"
+        class="rounded"
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>

frontend/src/components/EmailEditor.vue

@@ -9,60 +9,68 @@
     :editable="editable"
   >
     <template #top>
-      <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5">
+      <div class="flex flex-col gap-3">
-        <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
+        <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t pt-2.5">
-        <TextInput
+          <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
-          class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+          <MultiselectInput
-          v-model="subject"
+            class="flex-1"
-        />
+            v-model="toEmails"
-      </div>
+            :validate="validateEmail"
-      <div
+            :error-message="
-        class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5"
+              (value) => __('{0} is an invalid email address', [value])
-        :class="[cc || bcc ? 'border-b' : '']"
+            "
-      >
+          />
-        <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
+          <div class="flex gap-1.5">
-        <MultiselectInput
+            <Button
-          class="flex-1"
+              :label="__('CC')"
-          v-model="toEmails"
+              @click="toggleCC()"
-          :validate="validateEmail"
+              :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-          :error-message="
+            />
-            (value) => __('{0} is an invalid email address', [value])
+            <Button
-          "
+              :label="__('BCC')"
-        />
+              @click="toggleBCC()"
-      </div>
+              :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-      <div
+            />
-        v-if="cc"
+          </div>
-        class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5"
+        </div>
-        :class="bcc ? 'border-b' : ''"
+        <div v-if="cc" class="sm:mx-10 mx-4 flex items-center gap-2">
-      >
+          <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
-        <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
+          <MultiselectInput
-        <MultiselectInput
+            ref="ccInput"
-          ref="ccInput"
+            class="flex-1"
-          class="flex-1"
+            v-model="ccEmails"
-          v-model="ccEmails"
+            :validate="validateEmail"
-          :validate="validateEmail"
+            :error-message="
-          :error-message="
+              (value) => __('{0} is an invalid email address', [value])
-            (value) => __('{0} is an invalid email address', [value])
+            "
-          "
+          />
-        />
+        </div>
-      </div>
+        <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2">
-      <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5">
+          <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
-        <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
+          <MultiselectInput
-        <MultiselectInput
+            ref="bccInput"
-          ref="bccInput"
+            class="flex-1"
-          class="flex-1"
+            v-model="bccEmails"
-          v-model="bccEmails"
+            :validate="validateEmail"
-          :validate="validateEmail"
+            :error-message="
-          :error-message="
+              (value) => __('{0} is an invalid email address', [value])
-            (value) => __('{0} is an invalid email address', [value])
+            "
-          "
+          />
-        />
+        </div>
+        <div class="sm:mx-10 mx-4 flex items-center gap-2 pb-2.5">
+          <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
+          <TextInput
+            class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+            v-model="subject"
+          />
+        </div>
       </div>
     </template>
     <template v-slot:editor="{ editor }">
       <EditorContent
         :class="[
-          editable && 'sm:mx-10 mx-4 max-h-[35vh] overflow-y-auto border-t py-3',
+          editable &&
+            'sm:mx-10 mx-4 max-h-[35vh] overflow-y-auto border-t py-3',
         ]"
         :editor="editor"
       />
@@ -147,7 +155,7 @@ import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelecto
 import { TextEditorFixedMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { validateEmail } from '@/utils'
 import { EditorContent } from '@tiptap/vue-3'
-import { ref, computed, defineModel } from 'vue'
+import { ref, computed, defineModel, nextTick } from 'vue'
 
 const props = defineProps({
   placeholder: {
@@ -211,7 +219,7 @@ async function applyEmailTemplate(template) {
     {
       template_name: template.name,
       doc: modelValue.value,
-    }
+    },
   )
 
   if (template.subject) {
@@ -225,6 +233,16 @@ async function applyEmailTemplate(template) {
   showEmailTemplateSelectorModal.value = false
 }
 
+function toggleCC() {
+  cc.value = !cc.value
+  cc.value && nextTick(() => ccInput.value.setFocus())
+}
+
+function toggleBCC() {
+  bcc.value = !bcc.value
+  bcc.value && nextTick(() => bccInput.value.setFocus())
+}
+
 defineExpose({
   editor,
   subject,
@@ -233,8 +251,6 @@ defineExpose({
   toEmails,
   ccEmails,
   bccEmails,
-  ccInput,
-  bccInput,
 })
 
 const textEditorMenuButtons = [